[React] v17 vs v18 update state batch

동일한 코드 사용

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

export default function App() {
  const [a, setA] = useState(0);

  useEffect(() => {
    setA((a) => {
      console.log("first useEffect = " + a + "->" + 1);
      return 1;
    });
  }, []);

  useEffect(() => {
    if (a === 2) {
      setA((a) => {
        console.log("secont useEffect = " + a + "->" + 3);
        return 3;
      });
    }
  }, [a]);

  useLayoutEffect(() => {
    setA((a) => {
      console.log("useLayoutEffect = " + a + "->" + 2);
      return 2;
    });
  }, []);

  console.log("render", a);

  return <div/>
}

 

 

React 18.2.0

 

React 17.0.1

 

state update 동작의 batch 처리에 따라 렌더링 횟수의 차이와 useEffect 호출 로직에 차이가 있음을 알 수 있다.

특히 second useEffect의 경우, if(a === 2) 라는 조건을 걸었음에도, 배치 처리로 인해 실행 시점의 a의 값이 1임을 알 수 있다.