useEffect vs useLayoutEffect

useEffect

언제 어떻게 동작하나?

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

Timeline

useLayoutEffect

언제 어떻게 동작하나?

Browser Painting이 시작되기 전에 useLayoutEffect가 실행되므로, 중간 과정이 없이 바로 배경색이 변경된다.

Timeline

공식 가이드의 설명

useEffect로 전달된 함수는 지연 이벤트 동안에 레이아웃 배치와 그리기를 완료한 후 발생합니다.
이것은 구독이나 이벤트 핸들러를 설정하는 것과 같은 다수의 공통적인 부작용에 적합합니다.
왜냐면 대부분의 작업이 브라우저에서 화면을 업데이트하는 것을 차단해서는 안 되기 때문입니다.

그렇지만, 모든 effect가 지연될 수는 없습니다.
예를 들어 사용자에게 노출되는 DOM 변경은 사용자가 노출된 내용의 불일치를 경험하지 않도록 다음 화면을 다 그리기 이전에 동기화 되어야 합니다.
(그 구분이란 개념적으로는 수동적 이벤트 리스너와 능동적 이벤트 리스너의 차이와 유사합니다)
이런 종류의 effect를 위해 React는 useLayoutEffect라는 추가적인 Hook을 제공합니다.
그것은 useEffect와 동일한 시그니처를 가지고 있고 그것이 수행될 때에만 차이가 납니다.

useEffect는 브라우저 화면이 다 그려질 때까지 지연됩니다만, 다음 어떤 새로운 렌더링이 발생하기 이전에 발생하는 것도 보장합니다.
React는 새로운 갱신을 시작하기 전에 이전 렌더링을 항상 완료하게 됩니다.

React 18 부터는, useEffect로부터 전달된 함수도 특정한 상황일 때 layout and paint 전에 동기적으로 실행됩니다.

• click 같은 유저의 입력의 결과
• flushSync로 래핑된 업데이트의 결과일 때
  이 동작을 통해 이벤트 시스템 또는 flushSync 호출자가 효과의 결과를 관찰할 수 있습니다.

참고

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