useEffect vs useLayoutEffect

차이점

useEffect의 이펙트는 DOM이 화면에 그려진 이후에 호출되고,
useLayoutEffect의 이펙트는 DOM이 화면에 그려지기 전에 호출된다.

useLayoutEffect 를 사용하면 렌더링 후 paint 전에 실행된다.
DOM이 그려지기 전에 빠르게 적용하기 위해 useLayoutEffect를 사용할 수 있다.

사용법

useEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependancy array]);
  
useLayoutEffect(() => {
  // do side effects
  return () => /* cleanup */
}, [dependancy array]);

사용법 자체는 useEffect() 와 동일하다. 이름만 바꿔주면 된다.

주의점

useLayoutEffect는 내부 로직이 복잡한 경우 사용자가 레이아웃을 보는 시간이 길어지는 등 성능을 저하시킬 수 있다. 조건부로 사용하는게 바람직하다.

서버 사이드 랜더링인 경우 자바스크립트가 다운이 끝나기 전까진 useLayoutEffect와 useEffect 어느 것도 실행되지 않는다