useState 원리, 함수형 업데이트와 배치(Batch)

useState의 동작 원리

• useState는 동기, 하지만 비동기처럼 동작

원리

1. state의 변경
2. useState는 queue에 state 업데이트 쌓임(같은 값이 여러 개면 최적화 되어 사라질 수 있음)
3. 효율성을 위해 event Loop에서 state 업데이트 요청들을 batching으로 한번에 처리(16ms동안 변경된 상태 값들을 하나로 묶어 처리)
4. useState는 const로 선언하기 때문에 불변성에 의 값을 변경 불가
5. 따라서 리렌더링이 발생하고 화면에 변경된 state가 보임 => 따라서 비동기처럼 동작하는 것 처럼 보임

함수형 업데이트

-문제점 코드

const [count, setcount] = useState(0);

setCount(count + 1);
setCount(count + 1);
//count는 1

• 이 코드에서는 “지금의 상태 스냅샷"을 복사해 사용하기 때문에 두 번 호출해도 똑같은 값을 기반으로 동작 → 최종적으로 한 번만 업데이트됨
• 이 방식도 state 업데이트 요청이 큐에 쌓이지만, 값이 같으면 최적화되어 무시됨

 

-개선한 코드

const [count, setcount] = useState(0);

setCount(prev => prev + 1);
setCount(prev => prev + 1);
// count는 2

• React는 setState()를 만나면 즉시 리렌더하지 않고, 현재 콜스택이 비는 시점에 batching해서 처리합니다.
• 함수형 업데이트를 사용하면, React가 나중에 "이전 값을 최신 상태로 전달"해줍니다.
• 이전 상태에 의존하여 새로운 상태를 계산 가능
• 함수형 업데이트는 "현재 값이 뭐든 간에 순차적으로 처리해야 하는 로직"이라고 판단하므로, 순서대로 큐에 쌓고 적용

Batch

1. 배치 처리의 주요 목적
   • 성능 최적화: 여러 상태 업데이트를 한 번의 리렌더링으로 처리
   • 불필요한 렌더링 감소
   • 애플리케이션의 성능 향상
2. 배치 처리의 메커니즘
   • 상태 업데이트 요청을 큐에 쌓음
   • 현재 이벤트 루프가 완료되면 한 번에 처리
   • 불필요한 중간 렌더링 방지
3. 성능 최적화 전략
   • 상태 업데이트 요청의 효율적인 관리
   • 최소한의 리렌더링으로 UI 업데이트
   • 함수형 업데이트를 통한 정확한 상태 관리

-예시 코드

function BatchingExample() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  const handleClick = () => {
    // React 17 이전: 두 번의 리렌더링 발생
    // React 18 이후: 단 한 번의 리렌더링으로 최적화
    setCount(c => c + 1);   // 첫 번째 상태 변경
    setFlag(f => !f);       // 두 번째 상태 변경
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

• 리액트 18이전에서는 이 코드에서 리렌더링이 2번 발생
• 리액트 18 이후에는 batch가 생겨서 리렌더링이 1번 발생