React useLayoutEffect

useEffect와 useLayoutEffect의 실행 시점

function App() {
  const [count, setCount] = useState(0)
  useEffect(() => {
    console.log('useEffect', count)
  }, [count])
  useLayoutEffect(() => {
    console.log('useLayoutEffect', count)
  }, [count])
  function handleClick() {
    setCount((prev) => prev + 1)
  }
  return (
  	<button onClick={handleClick}>{count}</button>
  )
}

 

• 리액트가 DOM을 업데이트
• useLayoutEffect 실행(동기적)
  • useLayoutEffect의 실행이 종료될 때까지 기다렸다가 페인팅
  • 오래걸릴 시 지연 등의 성능 문제 발생
• 브라우저 화면 페인팅
• useEffect 실행

사용예시

DOM은 계산됐지만 화면에 반영되기 전에 조작하고싶은 내용이 있을때 사용합니다.

예를 들면, position: 'fixed'인 헤더와 다른 컴포넌트가 겹치지 않기 위해 헤더의 높이를 추적하는 박스를 생성하고싶을 때 

function Header() {
  const [height, setHeight] = useState(0)
  const elementRef = useRef(null)

  useLayoutEffect(() => {
    setHeight(elementRef.current.offsetHeight)
  }, [])

  return (
    <>
      {/* 헤더 */}
      <div 
        ref={elementRef} 
        style={{ position: 'fixed', top: 0, width: '100%' }}
      >
        헤더
      </div>
      {/* 헤더와 다른 컴포넌트가 겹치지 않기 위한 여백 */}
      <div style={{ height }} />
    </>
  )
}

 

 

 

 

 

 

 

[참고자료]

모던 리액트 Deep Dive