React 19 est sorti

Date de sortie : 5 décembre 2024

Documentation officielle : React 19

React 19 simplifie les patterns qu’on implémentait à la main depuis des années. Les Actions gèrent le pending/error/success des formulaires. useOptimistic rend l’UI optimiste triviale. Et forwardRef ? C’est de l’histoire ancienne — ref est maintenant une prop comme les autres.

Les nouveautés principales

Actions — formulaires simplifiés

Les Actions gèrent automatiquement les états pending, erreurs et mises à jour optimistes :

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

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

useOptimistic — UI optimiste

Mettre à jour l’UI immédiatement pendant qu’une action est en cours :

function LikeButton({ initialLikes }) {
  const [likes, setLikes] = useState(initialLikes);
  const [optimisticLikes, addOptimisticLike] = useOptimistic(likes);

  async function handleLike() {
    addOptimisticLike(likes + 1);
    await sendLike();
    setLikes(likes + 1);
  }

  return <button onClick={handleLike}>{optimisticLikes} ❤️</button>;
}

L’API use() — lire des ressources

Lire des promesses et du contexte directement dans le rendu :

function Comments({ commentsPromise }) {
  // Suspend jusqu'à résolution
  const comments = use(commentsPromise);
  return comments.map(c => <Comment key={c.id} {...c} />);
}

// Peut être appelé conditionnellement !
function Theme({ showTheme }) {
  if (showTheme) {
    const theme = use(ThemeContext);
    return <div style={{ color: theme.color }}>...</div>;
  }
  return null;
}

ref en tant que prop

Plus besoin de forwardRef :

// Avant
const Input = forwardRef((props, ref) => (
  <input ref={ref} {...props} />
));

// Après
function Input({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

Server Components (stable)

Les composants serveur sont maintenant stables :

// Ce composant s'exécute sur le serveur
async function BlogPost({ id }) {
  const post = await db.posts.get(id);
  return (
    <article>
      <h1>{post.title}</h1>
      <Content html={post.content} />
    </article>
  );
}

Métadonnées document natives

Gérer <title>, <meta>, <link> directement dans les composants :

function BlogPost({ post }) {
  return (
    <>
      <title>{post.title}</title>
      <meta name="description" content={post.summary} />
      <article>...</article>
    </>
  );
}

Autres améliorations

• Support natif des stylesheets avec priorité
• Support des scripts async
• Préchargement des ressources
• Meilleurs messages d’erreur d’hydratation
• <Context> au lieu de <Context.Provider>
• 
  

À retenir

React 19 élimine du boilerplate et des patterns qu’on copiait-collait depuis des années. Les Actions simplifient les formulaires, use() change la façon dont on gère les données async, et la fin de forwardRef est une bénédiction. Si vous faites du React, cette version vaut le détour.