[BFE.dev] Automatic batching 1

Automatic batching 1

// This is a React Quiz from BFE.dev 

import * as React from 'react'
import { useState } from 'react'
import { createRoot } from 'react-dom/client'
import { screen, fireEvent } from '@testing-library/dom'

function App() {
  const [state, setState] = useState(0)
  console.log("App " + state)
  return (
    <div>
      <button onClick={() => {
        setState(count => count + 1)
        setState(count => count * 2)
      }}>click me</button>
    </div>
  )
}

(async () => {
  const root = createRoot(document.getElementById('root'));
  root.render(<App/>)

  fireEvent.click(await screen.findByText('click me'))
})()

출력 결과

"App 0"
"App 2"

풀이 과정

1. 초기 렌더링

• App 0 출력: 앱이 처음 실행될 때 state는 0으로 초기화됩니다.

2. 클릭 이벤트 처리

• 상태 업데이트 큐(Queue): 버튼을 클릭하면 두 개의 업데이트 함수가 순차적으로 큐에 들어갑니다.

  • count => count + 1 (현재 0 → 1 대기)

  • count => count * 2 (앞선 결과 1 → 2 대기)

    • 자동 배칭(Batching): React는 효율성을 위해 두 번의 setState를 하나의 렌더링 주기로 묶어서 처리합니다. 즉, 상태가 바뀔 때마다 매번 렌더링하지 않고 모든 계산이 끝날 때까지 기다립니다.

3. 상태 업데이트 후 재렌더링

• App 2 출력: 상태 업데이트가 완료되어 state가 최종적으로 2가 됩니다. 상태가 변경되었으므로 App 컴포넌트가 다시 호출됩니다.