Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요?

Concurrent Mode(Concurrent Rendering)와 Suspense를 활용해 비동기 UI를 구성하는 방법과, 이 패턴의 장단점은 무엇인가요?

** Concurrent Mode & Suspense

* Concurrent Mode : 리액트 18이상에서 활성화 가능하고, 렌더링을 비동기로 수행하여 UI 차단 없이 업데이트를 처리한다.

* Suspense : 비동기 컴포넌트 ( ex : lazy import, data fetch ) 로딩 시 fallback UI를 자동표시

import {Suspense, lazy} from 'react';

const Profiles = lazy(()=> import ('./Profile'));

function App(){
	return(
    	<Suspense fallback={<div>Loading Profile...</div>}>
        	<Profile userId={123} />
        </Suspense>
    );
}

 

사용자 입력에 즉시 반응해서 부드러운 ux를 제공한다는 것과

코드 분할 및 데이터 패칭 통합이라는 장점이 있지만, 

 

복잡도가 증가한다. 동시성 버그가 일어날 수 있다. 

아직 일부 라이브러리 호환성이 미흡하다.