useLayoutEffect

특징

• 우선 공식문서의 적힌 내용들은 다음과 같다
  

이 함수의 시그니처는 useEffect와 동일하나, 모든 DOM의 변경 후에 동기적으로 발생한다

• 이 말의 useEffect와 동일 하다는 것은 두 훅의 형태나 사용 예제가 동일하다는 의미다

useLayoutEffect can hurt performance. Prefer useEffectwhen possible.

• useEffect보다 성능이 떨어진다는 의미
• 가장 중요한 특징
  - 모든 DOM의 변경 후에 동기적으로 발생
  1. ❗모든 DOM의 변경 후라는 의미는 변경사항이 반영되는 시점이 아니라 변경사항이 발생하고 반영 되기 전이다
  2. 동기적이란 뜻은 useLayoutEffect 실행이 종료될 때까지 기다린 다음 화면을 그린다는 의미
  (동기적 특징때문에 잠시간 일시 중지되는 것과 같은 일이 발생 → 성능에 영향)
  - 실행 순서
  1. 리액트가 DOM 업데이트
  2. useLayoutEffect를 실행
  3. 브라우저에 변경 사항을 반영
  4. useEffect를 실행
  
  
  

useLayoutEffect vs useEffect

• 항상 useLayoutEffect이 useEffect보다 먼저 실행된다
• 이유는 useLayoutEffect은 브라우저에 변경사항이 반영 되기 전에 실행되고 useEffect은 변경사항이 반영된 후에 실행되기 때문이다

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

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 (
    <>
      <h1>{count}</h1>
      <button onClick={handleClick}>+</button>
    </>
  );
}

export default App;

Ref

https://react.dev/reference/react/useLayoutEffect