useEffect vs useLayoutEffect

useEffect

useEffect는 화면 렌더링이 완료된 후 혹은 어떤 값이 변경되었을 때 사이드 이펙트를 수행한다.

useEffect로 전달된 함수는 layout과 paint가 완료된 후에 비동기적으로 실행된다.
만약 DOM에 영향을 주는 코드가 있을 경우, 사용자는 화면의 깜빡임과 동시에 화면 내용이 달라진다. 중요한 정보일 경우, 화면이 다 렌더되기 전에 동기화해주는 것이 좋다.

React 18부터는 useEffect에서도 layout과 paint 전에 동기적으로 함수를 실행할 수 있는 flushSync라는 함수가 추가되었다. 하지만 강제로 실행하는 것이다보니, 성능상 이슈가 있을 수 있다.

useLayoutEffect

useLayoutEffect는 useEffect와 동일하지만, 렌더링 후 layout과 paint 전에 동기적으로 실행된다.
때문에 설령 DOM을 조작하는 코드가 존재하더라도, 사용자는 깜빡임을 보지 않는다.