React 18

Automatic Batching

React 18 agrupa múltiplos setState em um único re-render, mesmo em async/promises/setTimeout.

Definição

Automatic Batching é uma feature do React 18 onde múltiplas chamadas de setState dentro do mesmo evento (incluindo async, promises, timeouts) são agrupadas em um único re-render. No React 17, batching só ocorria em event handlers React.

Problema → Solução

Problema

Em React 17, setState dentro de fetch/setTimeout/Promise causava múltiplos re-renders, prejudicando performance.

Solução

React 18 detecta automaticamente e agrupa. Para forçar render imediato (raríssimo), use flushSync.

Dica de entrevista

Tip

Se algum código depende do comportamento antigo (sem batching), use flushSync. Mas é raro — normalmente batching é o que você quer.

Código

// React 17: 3 re-renders
async function handleClick() {
  setLoading(true);    // re-render
  const data = await fetch();
  setData(data);       // re-render
  setLoading(false);   // re-render
}

// React 18: 1 re-render automático!
async function handleClick() {
  setLoading(true);
  const data = await fetch();
  setData(data);
  setLoading(false); // tudo batched
}

// Forçar render imediato (raro)
import { flushSync } from 'react-dom';
flushSync(() => setOpen(true));
// DOM já atualizado aqui
elementRef.current.focus();

Perguntas de entrevista

Q.Quando NÃO há batching?▾

A.Quase nunca em React 18. Apenas se você usar flushSync explicitamente. Em React 17, batching acontecia apenas em eventos sintéticos do React (onClick, onChange).

Q.flushSync — quando usar?▾

A.Quando precisa de UI atualizada IMEDIATAMENTE antes de uma próxima ação (ex: scrollIntoView depois de adicionar elemento). Caso de uso raríssimo, evite.

Q.Batching afeta useEffect?▾

A.Effects rodam após o batching, com o state final. Múltiplos setState batched = useEffect roda uma vez com o estado final.

46/122← →