Réagissez aux nouveautés, pourquoi c'est important et conseils de migration

C'est reparti : un autre article sur les nouvelles fonctionnalités de React ?. Mais honnêtement, celui-ci en vaut la peine. React 19 est officiellement passé de sa Release Candidate (RC), lancée en avril 2024, à sa version stable, remplie de mises à jour puissantes ! Des améliorations de performances aux nouveaux hooks et outils, React 19 offre quelque chose pour tout le monde, qu'il s'agisse de créer de petites applications ou de solutions d'entreprise.

Plongeons dans les nouveautés, avec des exemples de code et des conseils de migration pour vous aider à mettre à niveau vos projets en toute transparence.

Quoi de neuf dans React 19

1. Optimisations des performances

React 19 présente :

• Améliorations sélectives de l'hydratation : optimise l'hydratation des applications rendues par le serveur en hydratant uniquement certaines parties de l'interface utilisateur selon les besoins.
• Taille du bundle plus petite : la bibliothèque de React 19 est plus légère, ce qui entraîne des temps de chargement plus rapides et une utilisation réduite du réseau.

Exemple : hydratation efficace

import { hydrateRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
hydrateRoot(container, <App />);

2. Crochets nouveaux et améliorés

a. useFormStatus : gestion simplifiée de l'état des formulaires

Les formulaires sont plus faciles à gérer grâce au nouveau hook useFormStatus. Il suit l'état en attente d'un formulaire sans nécessiter de contexte personnalisé ni de forage d'accessoires.

import { useFormStatus } from 'react-dom';

function SubmitButton() {
  const { pending } = useFormStatus();
  return <button type="submit" disabled={pending}>Submit</button>;
}

b. useDeferredValue : l'option initialValue

Le hook useDeferredValue mis à jour garantit des transitions d'interface utilisateur plus fluides en rendant une valeur de repli initiale lors du traitement des données différées.

import { useDeferredValue } from 'react';

function Search({ deferredValue }) {
  const value = useDeferredValue(deferredValue, '');

  return <Results query={value} />;
}

c. useOptimistic : gérer les mises à jour optimistes

Le nouveau hook useOptimistic simplifie les mises à jour optimistes de l'interface utilisateur.

import { useOptimistic } from 'react';

function LikeButton() {
  const [optimisticLikes, setOptimisticLikes] = useOptimistic(0);

  function handleLike() {
    setOptimisticLikes(prev => prev + 1);
    fetch('/api/like', { method: 'POST' });
  }

  return <button onClick={handleLike}>Likes: {optimisticLikes}</button>;
}

3. Levage des métadonnées du document

React 19 récupère automatiquement les métadonnées telles que