Automatic batching React 18

Release najnowszej wersji Reacta 18, już niedługo.

Pamiętasz wcześniejsze wersje Reacta, które służyły do aktualizowania wielu stanów jednocześnie po wywołaniu jakiegoś handlera, np po przyciśnięciu na przycisk?

React 18 dodał automatyczne grupowanie aktualizacji stanu aby poprawić wydajność i optymalizację.

W React 18, aktualizacja stanu komponentu w event hendlerach, promisach, time out’ach, będzi domyślnie poddana batchingu!.

Co to jest batching?

Weźmy funkcję, która wywołuje wiele aktualizacji stanu komponentu, react batching zaktualizuje je w stanie komponentu i wyrenderuje je naraz.

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

  function handleClick() {
    setCount(c => c + 1); // Does not re-render yet
    setFlag(f => !f); // Does not re-render yet
    // React will only re-render once at the end (that's batching!)
  }

  return (
    <div>
      <button onClick={handleClick}>Next</button>
      <h1 style={{ color: flag ? "blue" : "black" }}>{count}</h1>
    </div>
  );
}

Jak uniknąć batchingu?

Istnieją przypadki w których chcielibyśmy uniknąć batchingu, możemy użyć do tego flushSync API z react-dom

import { flushSync } from 'react-dom'; 

function handleClick() {
  flushSync(() => {
    setCounter(c => c + 1);
  });
  // React zaktualizuje dom odrazu
  flushSync(() => {
    setFlag(f => !f);
  });
}

Co o tym myślisz? Czy będzie to powodowało problemy w obecnych już projektach?

Zostaw komentarz i podziel się swoją opinią.