[BFE.dev] flushSync()

flushSync()

👉 flushSync : 일반적으로 사용되지 않고, 애플리케이션의 저하를 일으킬 수 있어 사용 시 주의가 필요함

// This is a React Quiz from BFE.dev


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

function App() {
  const [state, setState] = useState(0)
  const onClick = () => {
    console.log('handler')
    flushSync(() => {
      setState(state => state + 1)
    })
    console.log('handler ' + state)
  }
  console.log('render ' + state)
  return <div>
    <button onClick={onClick}>click me</button>
  </div>
}

const root = createRoot(document.getElementById("root"));
root.render(<App />);

(async function () {
  const action = await screen.findByText('click me')
  fireEvent.click(action);
})()

출력 결과

"render 0"
"handler"
"render 1"
"handler 0"

풀이 과정

1. 초기 렌더링

• render 0 출력: root.render(<App />)가 실행되면서 state의 초기값인 0으로 첫 렌더링이 일어납니다.

• handler 출력: 버튼 클릭 직후 onClick 핸들러 내의 첫 번째 console.log가 실행됩니다.

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

• render 1 출력: flushSync 내부에서 setState가 호출되면 React는 핸들러가 끝나길 기다리지 않고 그 즉시 App을 리렌더링합니다. onClick 함수가 끝나기도 전에 리렌더링 console.log가 먼저 찍힙니다.

• handler 0 출력: 리렌더링은 끝났지만 onClick 함수 내의 state 변수는 클로저 현상 때문에 여전히 함수가 시작될 때의 값인 0을 참조합니다.