useEffect와 useLayoutEffect

결론

useEffect와 useLayoutEffect는 기본적으로 둘 다 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook입니다.

그러나 실행 시점에서 차이가 있습니다.
렌더링(페인팅까지 마침) 이전에 하고 싶은 작업은 useLayoutEffect에서, 렌더링(페인팅까지 마침) 이후에 하고 싶은 작업은 useEffect에서 처리해주면 됩니다.

설명

useEffect

useEffect는 페인팅 후에 실행됩니다. 그렇기 때문에 useEffect 내부에 DOM에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됩니다. 이 작업은 비동기적으로 실행됩니다.

useLayoutEffect

useLayoutEffect는 페인팅 전에 실행됩니다. 그렇기 때문에 DOM을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않습니다. 이 작업은 동기적으로 실행됩니다.

useLayoutEffect는 내부의 코드가 모두 실행된 후 페인트 작업을 하기 때문에 내부 로직이 복잡할 경우 사용자가 레이아웃을 보는 데까지 시간이 오래 걸린다는 단점이 있습니다. 따라서 기본적으로는 항상 useEffect만을 사용하는 것이 좋습니다.

[참고] [React] useEffect 와 useLayoutEffect 의 차이는 무엇일까?
[참고] useLayoutEffect 훅에 대하여
[참고] When to useLayoutEffect Instead of useEffect (example)