React v La version stable et les nouveautés

React 19 est officiellement arrivé, apportant une multitude de nouvelles fonctionnalités et améliorations qui simplifient le développement et améliorent les performances des applications. De la gestion améliorée des états à une meilleure intégration côté serveur, React 19 a quelque chose pour tout le monde.

---

Principales fonctionnalités de React 19 :

1. Actions pour une gestion simplifiée de l'état asynchrone

La gestion des opérations asynchrones telles que les requêtes API a toujours été un défi courant dans React. React 19 introduit les Actions, qui automatisent les états en attente, la gestion des erreurs et les mises à jour optimistes.

Exemple : Soumission de formulaire simplifié avec

Actions

import { useActionState } from "react";

function UpdateNameForm() {
  const [error, submitAction, isPending] = useActionState(
    async (prevState, formData) => {
      const name = formData.get("name");
      const error = await updateName(name);
      if (error) {
        return error;
      }
      redirect("/profile");
      return null;
    },
    null
  );

  return (
    <form action={submitAction}>
      <input type="text" name="name" />
      <button type="submit" disabled={isPending}>
        Update
      </button>
      {error && <p>{error}</p>}
    </form>
  );
}

Ici, useActionState gère l'état de soumission et la gestion des erreurs pour vous, rendant le code plus propre et plus facile à maintenir.

---

2. Mises à jour optimistes avec useOptimistic

Les mises à jour optimistes de l'interface utilisateur permettent aux utilisateurs de voir immédiatement les modifications lorsqu'une requête asynchrone est en cours. Le nouveau hook useOptimistic rend ce modèle simple.

Exemple : changement de nom optimiste

import { useOptimistic } from "react";

function ChangeName({ currentName, onUpdateName }) {
  const [optimisticName, setOptimisticName] = useOptimistic(currentName);

  const submitAction = async (formData) => {
    const newName = formData.get("name");
    setOptimisticName(newName); // Show optimistic state
    const updatedName = await updateName(newName); // Wait for the async request
    onUpdateName(updatedName); // Update the actual state
  };

  return (
    <form action={submitAction}>
      <p>Your name: {optimisticName}</p>
      <input type="text" name="name" />
      <button type="submit">Change Name</button>
    </form>
  );
}

useOptimistic garantit une expérience utilisateur transparente en affichant les mises à jour avant même que le serveur ne réponde.

---

3. Rapport d'erreur amélioré pour les inadéquations d'hydratation

React 19 améliore la gestion des erreurs, notamment pour les erreurs d'hydratation. Au lieu de vagues erreurs, vous obtenez désormais des différences détaillées de contenu incompatible entre le serveur et le client.

Exemple : Diff d'erreur d'hydratation

Uncaught Error: Hydration failed because the server-rendered HTML didn’t match the client.
Tree mismatch:
+ Client: <span>Welcome</span>
- Server: <span>Hello</span>

Ces messages clairs aident les développeurs à déboguer les problèmes rapidement et efficacement.

---

4. Composants du serveur et actions du serveur

Les composants React Server (RSC) permettent de restituer les composants sur le serveur, améliorant ainsi les performances. Les actions du serveur permettent d'appeler des fonctions asynchrones sur le serveur directement à partir des composants clients.

Exemple : Utilisation des actions du serveur

// Server Component
export const fetchComments = async () => {
  const response = await fetch("/api/comments");
  return await response.json();
};

// Client Component
import { use } from "react";

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise); // Suspends until resolved
  return (
    <ul>
      {comments.map((comment) => (
        <li key={comment.id}>{comment.text}</li>
      ))}
    </ul>
  );
}

// Usage
function App() {
  return (
    <Suspense fallback={<p>Loading comments...</p>}>
      <Comments commentsPromise={fetchComments()} />
    </Suspense>
  );
}

Les actions serveur rationalisent la récupération et le rendu des données côté serveur dans les composants clients.

---

5. Gestion native des métadonnées et des feuilles de style

React 19 prend désormais en charge