[React] useLayoutEffect vs useEffect

  useLayoutEffect와 useEffect는 모두 의존값의 변화에 따라 side effect 함수를 실행시킨다는 점에서 유사한 성질을 가진다. 그러나 실제 그것이 동작하는 방식에 있어서 실제로 그것을 활용하는 방향성에 있어서 차이점을 지닌다.

 

	useEffect	useLayoutEffect
실행 순서	컴포넌트 렌더링 → 화면 갱신 → side effect	컴포넌트 렌더링 → side effect → 화면 갱신
side effect 함수 실행 방식	비동기	동기

 

  useEffect문을 사용해서 DOM element의 style을 지정하는 등 mutation을 일으키는 경우 이미 화면이 갱신된 이후에 또 다시 화면이 갱신되면서 '깜빡거림'(flickering)이 발생한다. 이는 SPA의 장점을 망치는 현상 중 하나이다. 깜빡거림은 사용자 경험에 매우 부정적이다. 반면 useLayoutEffect는 화면 갱신이 이루어지기 전에 변경을 일으킬 수 있기 때문에 불필요한 깜빡거림이 발생하지 않는다. 따라서 state을 기준으로 DOM element에 mutation을 일으키고 싶을 때에는 useEffect 대신 useLayoutEffect를 사용하면 된다.