React - useEffect vs useLayoutEffect

useEffect
언제 어떻게 동작하나?

아래의 이미지를 보면, background color를 설정하는 로직이 browser painting 이후에 이루어 지고, 배경 색깔이 변경된다.
그러므로, 깜빡이는 현상이 보일 수 있다.
물론 아래의 예제에서는 직접 깜박이는 현상을 발견하진 않지만, 무거운 로직을 다룰 경우에 깜빡이는 현상이 있을 수 있다.
DOM을 직접 변경해야 할때는 useEffect가 효율적이진 않다.

Timeline

Component Renders > React starts the DOM changes > Browser Painting > useEffect function runs

 

useLayoutEffect
언제 어떻게 동작하나?
Browser Painting이 시작되기 전에 useLayoutEffect가 실행되므로, 중간 과정이 없이 바로 배경색이 변경된다.

Timeline

Component Renders > React starts the DOM changes >useLayoutEffect function runs > Browser Painting

 

공식 가이드의 설명

React 18 부터는, useEffect로부터 전달된 함수도 특정한 상황일 때 layout and paint 전에 동기적으로 실행됩니다.
 - click 같은 유저의 입력의 결과
 - flushSync로 래핑된 업데이트의 결과일 때. 이 동작을 통해 이벤트 시스템 또는 flushSync 호출자가 효과의 결과를 관찰할 수 있습니다.

 

참고
useEffect and useLayoutEffect | React Hooks | React.js Tutorial #6
Hooks API Reference - React