React19.1 -Effect Hooks(useLayoutEffect)

Hunter Joe·2025년 4월 22일

📌 useLayoutEffect

React에서는 해당 공식문서 페이지에 들어가자마자 다음과 같은 경고를 볼 수 있다.
useLayoutEffect성능에 악영향을 줄 수 있습니다. useEffect가능하면 사용하세요.

useLayoutEffect는 useEffect브라우저가 화면을 다시 그리기 전에 실행되는 버전이다.

Convention

useLayoutEffect(setup, dependencies?)

useLayoutEffect는 브라우저가 화면을 다시 페인팅하기 전에 레이아웃 측정을 수행하기 위해 호출한다.

import { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
  }, []);
  // ...

Caveats
useEffect의 주의사항과 유사한 부분이 많아서 마지막 2개의 주의사항만 작성함

useLayoutEffect 안에서 실행되는 코드와 그 안에서 일어나는 상태 업데이트들은 브라우저가 화면을 다시 그리기 전에 모두 처리되기 때문에 화면이 렌더링되는 걸 잠시 멈추게 된다.
과도하게 사용하면 app 자체를 느리게 만드며 useEffect를 권장한다.
만약 useLayoutEffect 안에서 state 업데이트를 실행하면 React는 남아있는 모든 Effect들을 실행한다. (useEffect를 포함해서)

useEffect vs useLayoutEffect

제일 큰 차이점은 useEffect는 비동기적으로 동작하고 useLayoutEffect는 동기적으로 동작.
→ 리액트에서 useEffect는 렌더링이 끝나고 특정 행동을 수행하고 useLayoutEffect는 렌더링 전에 특정 행동을 수행

useLayoutEffect는 렌더링 전에 특정 행동을 수행하므로 브라우저의 렌더링 파이프라인에서 큰 영향을 미칠 수 있다는 단점이 존재
이러한 문제를 해결하기 위해 네트워크 요청, DOM 접근, 비동기 작업을 하는 경우에는 useEffect를 사용하는 것이 좋다.
또한 서버에서 데이터를 가져오는 경우, 타이머를 설정하는 경우, 네이티브 API를 사용하는 경우가 있다.

useLayoutEffect는 렌더링 전에 특정 행동을 수행하도록 만들어주어 애니메이션 구현 등 즉시 반응이 필요한 경우에 사용하면 좋다.
성능 모니터링 기능을 사용할 때는 useLayoutEffect를 사용하면 유용하다.