Automatic Batching

React 🟡 Mid

Definition

React 18 regroupe automatiquement plusieurs mises a jour d'etat en un seul re-rendu, meme dans les callbacks asynchrones et les timeouts.

Analogie

Comme un facteur qui attend d'avoir tout le courrier du quartier avant de faire sa tournee, au lieu d'un aller-retour par lettre.

Exemple de code

// React 18: un seul re-rendu pour les deux
async function handleClick() {
  const data = await fetchData();
  setName(data.name);  // batch
  setAge(data.age);    // batch -> 1 seul rendu
}

Cas d'usage

Amelioration automatique des performances sans intervention du developpeur en React 18+.

Anti-pattern

Utiliser flushSync pour forcer des rendus synchrones sans raison valable.
#core#performance#react18