일련의 state 업데이트 대기

state를 설정하면 리렌더링을 대기열에 추가한다. 그러나 때로는 다음 렌더링을 대기시키기 전에 값에 대해 여러 작업을 수행해야 할 수도 있다. 이렇게 하려면 React가 상태 업데이트를 일괄 처리하는 방법을 이해해야한다.

React 집단 state 업데이트

React는 상태 업데이트를 처리하기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다린다. 그렇기에 모든 호출 후에 리렌더링이 발생한다.
이를 통해 너무 많은 리렌더링을 트리거하지 않고도 여러 컴포넌트에서 여러 state를 업데이트할 수 있다. 이것은 또한 이벤트 핸들러와 그 안의 모든 코드가 완료될 때 까지 UI가 업데이트되지 않는다는 것을 의미한다.
React는 클릭과 같은 여러 의도적인 이벤트를 일괄처리하지 않는다. 각 클릭은 개별적으로 처리된다. React는 일반적으로 안전한 경우에만 일괄 처리를 수행하므로 안심해라.

다음 렌더링 전에 동일한 상태를 여러번 업데이트

다음 렌더링 전에 동일한 변수를 여러 번 업데이트하려는 경우 상태 값을 전달하는 대신 이전 상태를 기반으로 다음 상태를 계산하는 함수를 전달할 수 있다.

import { useState } from 'react';

export default function Counter() {
  const [number, setNumber] = useState(0);

  return (
    <>
      <h1>{number}</h1>
      <button onClick={() => {
        setNumber(n => n + 1);
        setNumber(n => n + 1);
        setNumber(n => n + 1);
      }}>+3</button>
    </>
  )
}

setNumber(n=>n+1)

1. React는 이벤트 핸들러의 다른 모든 코드가 실행된 후 처리되도록 이 함수를 큐에 넣는다
2. 다음 렌더링 동안 React는 대기열을 통과하여 최종 업데이트된 state를 제공한다.