useEffect 와 useLayoutEffect 차이

useEffect

useEffect 는 컴포넌트들이 render 와 paint 된 후 실행됩니다. 비동기적(asynchronous) 으로 실행됩니다. paint 된 후 실행되기 때문에, useEffect 내부에 dom 에 영향을 주는 코드가 있을 경우 사용자 입장에서는 화면의 깜빡임을 보게됩니다.

useLayoutEffect

useLayoutEffect 는 컴포넌트들이 render 된 후 실행되며, 그 이후에 paint 가 됩니다. 이 작업은 동기적(synchronous) 으로 실행됩니다. paint 가 되기전에 실행되기 때문에 dom 을 조작하는 코드가 존재하더라도 사용자는 깜빡임을 경험하지 않습니다.

필수 개념

• Render: DOM Tree 를 구성하기 위해 각 엘리먼트의 스타일 속성을 계산하는 과정
• Paint: 실제 스크린에 Layout을 표시하고 업데이트하는 과정

결론

useEffect를 사용하는 것을 권장하지만
useLayoutEffect는 state 업데이트시 화면 깜빡임,
간발의 차이로 리렌더링 되는거 같을 때 사용하는 것이 바람직하다