React 18 est sorti

Date de sortie : 29 mars 2022

Documentation officielle : React v18

React 18 concrétise des années de R&D sur le rendu concurrent. L’idée ? Permettre à React d’interrompre un rendu pour traiter quelque chose de plus urgent. Le résultat : des apps plus réactives, surtout sur les listes longues et les recherches.

Les nouveautés principales

Concurrent rendering

React peut maintenant préparer plusieurs versions de l’UI simultanément :

import { createRoot } from 'react-dom/client';

// Nouveau mode concurrent
const root = createRoot(document.getElementById('root'));
root.render(<App />);

Le rendu concurrent permet à React d’interrompre un rendu en cours pour traiter une mise à jour plus urgente.

Automatic batching

Les mises à jour d’état sont maintenant groupées automatiquement, même dans les callbacks async :

// Avant React 18 : 2 rendus
setTimeout(() => {
  setCount(c => c + 1);
  setFlag(f => !f);
}, 1000);

// React 18 : 1 seul rendu (batching automatique)

useTransition — mises à jour non urgentes

Marquer certaines mises à jour comme non urgentes :

function SearchResults({ query }) {
  const [isPending, startTransition] = useTransition();
  const [results, setResults] = useState([]);

  function handleChange(e) {
    // Urgent : mettre à jour l'input
    setQuery(e.target.value);

    // Non urgent : peut être interrompu
    startTransition(() => {
      setResults(search(e.target.value));
    });
  }

  return (
    <>
      <input value={query} onChange={handleChange} />
      {isPending ? <Spinner /> : <Results data={results} />}
    </>
  );
}

useDeferredValue

Différer une valeur pour éviter de bloquer l’UI :

const deferredQuery = useDeferredValue(query);

// deferredQuery reste à l'ancienne valeur pendant le rendu

useId — IDs uniques SSR-safe

Générer des IDs stables entre serveur et client :

function PasswordField() {
  const id = useId();
  return (
    <>
      <label htmlFor={id}>Password</label>
      <input id={id} type="password" />
    </>
  );
}

Suspense SSR avec streaming

Suspense fonctionne maintenant avec le rendu serveur :

<Suspense fallback={<Spinner />}>
  <Comments />  {/* Peut être streamé plus tard */}
</Suspense>

Strict Mode plus strict

En dev, les composants sont montés, démontés, puis remontés pour détecter les effets mal nettoyés.

Fin du support IE11

React 18 ne supporte plus Internet Explorer 11. Bon débarras.

À retenir

Le concurrent mode est enfin là, et il marche. useTransition et useDeferredValue sont les nouveaux outils pour créer des UIs qui restent réactives même sous charge. Si vous faites du SSR, le streaming avec Suspense change la donne. écrire ici ...