Batch update의 조건

(React 18 이전 버전을 기준으로 하고 있습니다.)

우선, Batch란?

• React에서 성능 향상을 위해서 state를 일괄 업데이트해서 컴포넌트의 불필요한 렌더링 횟수를 줄이는 방법
• 그렇다면 언제 발생할까?
  • 특정 시간?
  • 특정 환경?
  • 특정 함수 사용?
  • 여러 이야기들이 나왔다.

문제로 확인해보자.

function App() {
  const [counter1, setCounter1] = useState(0);
  const [counter2, setCounter2] = useState(0);
  const [counter3, setCounter3] = useState(0);
  const [renderCount, setRenderCount] = useState(0);

  useEffect(() => {
    setRenderCount(renderCount + 1);
  }, [counter1, counter2, counter3]);

  const handleClick = () => {
    setCounter1(counter1 + 1);
    setCounter2(counter2 + 1);
    setCounter3(counter3 + 1);
  }

  return (
    <div>
			<h1>{renderCount}</h1>
      <button onClick={handleClick}>Click</button>

			<h2>{counter1}</h2>
			<h2>{counter2}</h2>
			<h2>{counter3}</h2>
      
    </div>
  );
}

Q. 버튼 클릭시에 renderCount의 증가 값은?

• 정답

• 해설

  const handleClick = () => {
		setTimeout(() => {
      setCounter1(counter1 + 1);
	    setCounter2(counter2 + 1);
	    setCounter3(counter3 + 1);
    }, 1000);
  }

Q. 버튼 클릭시 renderCount의 증가 값은?

• 정답

• 해설