React18의 Auto Batching 확인

배경.

Auto Batching이 어떻게 발생하는지 확인합니다.컨디션이 바뀔 때마다 한 번씩 나타난다는 얘기가 나오지만, 원래는 한 번이어야 했다.비동기 처리에서 진행되면 여러 번 발생할 수 있습니다.나는 인식이 정확한지 확인하고 싶다.

총결산

여러 번 상태가 변경되었을 때, React가 여러 번 나타날지 여부
릴리즈
실행 시기
결실
React17
동기
단 한 번
React17
비동기
여러 번
React18
동기
단 한 번
React18
비동기
단 한 번
React18 비동기식을 실행할 때 명시적으로 렌더링하려면 flashSync를 사용합니다.
보충으로 StrictMode를 사용하면 ReactElement의 제작이 여러 번 발생할 수 있음을 주의해야 한다.

확인 방법

리액트18과 리액트17을 통해 확인할 수 있는 코드를 준비했다.
내용은 아래와 같다(JSX 부분은 생략됨)

  const handleClick = () => {
    setA((a) => a + 1);
    setB((b) => b + 2); // React17でも1度だけ。
  };
  // 別のボタンから呼び出す。setTimeoutを使っている。
  const handleAsyncClick = () => {
    setTimeout(() => {
      setA((a) => a + 1); // React17だとここでレンダリングが発生してしまう
      setB((b) => b + 2);
    }, 0);
  };

  useEffect(() => {
    console.log("effect");
  });

  console.log("render", { a, b });

React18 확인 동작
https://codesandbox.io/s/auto-battching-test-in-18-gf1jts?file=/src/App.js
React17의 작업 확인
https://codesandbox.io/s/auto-battching-test-in-17-3ur1lr?file=/src/App.js
React17과 함께 하려면 다음과 같습니다.

  const handleFlushSyncClick = () => {
    setTimeout(() => {
      flushSync(() => {
        setA((a) => a + 1);
      });
      flushSync(() => {
        setB((b) => b + 2);
      });
    }, 0);
  };

–--
이 문서는 "Chatterk Tech Tips"의 일부입니다.
다른 Tips도 확인할 수 있어요.👨‍🏫