React 18 자동 배칭과 동시성 - React, 알고 쓰자 3일차

React 18 Automatic Batching & Concurrency - React Explained Day 3

// React 17 이하 예시
function handleClick() {
  // 이벤트 핸들러 내: 자동으로 배칭됨 (리렌더링 1번)
  setCount(c => c + 1);
  setFlag(f => !f);
}
setTimeout(() => {
  // setTimeout 콜백 내: 배칭 안 됨 (리렌더링 2번 발생)
  setCount(c => c + 1); // 리렌더링 발생
  setFlag(f => !f);      // 또 리렌더링 발생
}, 1000);

// React 18 예시
function handleClick() {
  // 이벤트 핸들러 내: 당연히 자동 배칭 (리렌더링 1번)
  setCount(c => c + 1);
  setFlag(f => !f);
}
setTimeout(() => {
  // setTimeout 콜백 내: 이제 자동으로 배칭 (리렌더링 1번)
  setCount(c => c + 1);
  setFlag(f => !f);
  // 모든 업데이트가 모아져서 단 한 번의 리렌더링만 발생
}, 1000);

import { flushSync } from 'react-dom'; // react-dom에서 import
 
function handleClick() {
  flushSync(() => {
    setCount(c => c + 1); // 이 업데이트는 즉시 처리되어 DOM에 반영됨
  });
  // 여기서는 DOM 업데이트가 완료된 상태임
  // (예: 업데이트된 DOM 요소에 접근하거나 포커스를 설정할 수 있음)
  // setFlag(f => !f); // 이 업데이트는 flushSync 밖에 있으므로 다시 자동 배칭 규칙을 따름
}

import React, { useState, useTransition } from 'react';
function SearchResults({ query }) {
  // ... 데이터 로딩 및 결과 표시 로직 ...
  return <div>{query} 검색 결과...</div>;
}
function App() {
  const [inputValue, setInputValue] = useState('');
  const [searchQuery, setSearchQuery] = useState('');
  const [isPending, startTransition] = useTransition(); // useTransition 훅 사용
 
  const handleChange = (e) => {
    // 1. 입력값 업데이트 (긴급)
    setInputValue(e.target.value);
    // 2. 검색 쿼리 업데이트 (긴급하지 않음 - Transition으로 감싸기)
    startTransition(() => {
      setSearchQuery(e.target.value);
    });
  };
 
  return (
    <div>
      <input type="text" value={inputValue} onChange={handleChange} />
      {isPending ? " 로딩 중..." : <SearchResults query={searchQuery} />}
    </div>
  );
}