Ce que React 19 change au rendu asynchrone

React 18 a introduit le rendu concurrent. React 19 ne remplace pas cette fondation—il s’appuie dessus en vous fournissant des patterns standardisés pour les workflows asynchrones que vous deviez auparavant implémenter vous-même.

Si vous avez géré des états isPending, coordonné la gestion d’erreurs à travers des opérations asynchrones, ou implémenté des mises à jour optimistes manuellement, React 19 fournit des APIs de première classe pour tout cela. Cet article explique ce qui a réellement changé et comment votre modèle mental devrait évoluer.

Pour référence, toutes les APIs discutées ici sont documentées dans la documentation officielle de React : https://react.dev

Le changement fondamental : de la plomberie manuelle aux patterns intégrés

React 18 nous a donné le moteur de rendu concurrent. React 19 nous donne les abstractions qui le rendent pratique.

Auparavant, gérer une soumission de formulaire asynchrone signifiait jongler avec plusieurs variables d’état :

const [isPending, setIsPending] = useState(false)
const [error, setError] = useState(null)

const handleSubmit = async () => {
  setIsPending(true)
  try {
    await submitData()
  } catch (e) {
    setError(e)
  } finally {
    setIsPending(false)
  }
}

Les Actions de React 19 éliminent entièrement ce code répétitif.

Les Actions React 19 et les transitions asynchrones

Le plus grand changement est que startTransition accepte désormais des fonctions asynchrones. Dans React 19, ces fonctions de transition asynchrones sont formellement appelées Actions dans la documentation React.

const [isPending, startTransition] = useTransition()

const handleSubmit = () => {
  startTransition(async () => {
    const error = await updateName(name)
    if (error) {
      setError(error)
      return
    }
    // effectuer la navigation ou la mise à jour d'état en cas de succès
  })
}

React 19 suit l’état pending de la transition pour vous, que vous lisez ensuite explicitement via des APIs comme useTransition ou useActionState. Toutes les mises à jour d’état à l’intérieur de startTransition sont regroupées, produisant un seul re-rendu lorsque le travail asynchrone se termine. Cela évite les états intermédiaires où isPending est false mais l’état d’erreur n’a pas encore été appliqué.

useActionState : gestion de formulaires dédiée

Pour les formulaires spécifiquement, useActionState fournit un état pending intégré et une gestion des résultats :

const [error, submitAction, isPending] = useActionState(
  async (previousState, formData) => {
    const error = await updateName(formData.get("name"))
    if (error) return error
    // effectuer la navigation ou mettre à jour l'état de l'application en cas de succès
    return null
  },
  null
)

return (
  <form action={submitAction}>
    <input type="text" name="name" />
    <button disabled={isPending}>Mettre à jour</button>
    {error && <p>{error}</p>}
  </form>
)

React améliore désormais l’attribut natif action des formulaires avec une gestion intégrée de l’état pending et des résultats.

useOptimistic : retour UI instantané

React 19 standardise les mises à jour optimistes via useOptimistic :

const [optimisticName, setOptimisticName] = useOptimistic(currentName)

const submitAction = async (formData) => {
  const newName = formData.get("name")
  setOptimisticName(newName) // L'UI se met à jour immédiatement
  const result = await updateName(newName)
  onUpdateName(result)
}

React fait revenir optimisticName à currentName lorsque le composant parent se re-rend avec l’état canonique après la résolution de l’action. Pour les actions échouées, assurez-vous que l’état de votre parent reste inchangé afin que la valeur optimiste revienne correctement.

Changements de React Suspense et l’API use()

L’API use() vous permet de lire des promesses directement pendant le rendu. Contrairement aux hooks, elle fonctionne à l’intérieur de conditions et de boucles :

function Comments({ commentsPromise }) {
  const comments = use(commentsPromise)
  return comments.map(comment => <p key={comment.id}>{comment}</p>)
}

Lorsque la promesse est en attente, use() suspend le composant. Enveloppez-le dans une boundary Suspense pour afficher une UI de secours.

Contrainte importante : use() ne prend pas en charge les promesses créées pendant le rendu. La promesse doit être mise en cache ou provenir d’une source compatible avec Suspense. Vous ne pouvez pas non plus utiliser use() à l’intérieur de blocs try-catch—les error boundaries gèrent les rejets à la place.

Dans les environnements compatibles serveur, la documentation React recommande de préférer async/await pour la sémantique de récupération de données, en utilisant use() principalement pour consommer des promesses déjà gérées.

Ce qui n’a pas changé

Les patterns d’UI concurrente de React—le système sous-jacent de planification, le rendu interruptible et le système de priorités—restent la fondation de React 18. React 19 n’introduit pas de nouveaux concepts de concurrence. Il fournit des APIs de niveau supérieur qui exploitent les capacités concurrentes existantes.

Le changement de modèle mental ne concerne pas la compréhension de nouvelles mécaniques de rendu. Il s’agit de reconnaître que React gère désormais les états d’UI asynchrones que vous gériez auparavant vous-même.

Implications pratiques

Arrêtez d’implémenter manuellement les états pending. Utilisez useTransition ou useActionState au lieu de variables isPending manuelles.

Adoptez les Actions pour les mutations. Toute fonction asynchrone enveloppée dans startTransition devient une Action avec une planification consciente des transitions.

Utilisez useOptimistic pour des UIs réactives. Le pattern est désormais standardisé, ce n’est plus quelque chose que vous implémentez de manière ad-hoc.

Associez use() avec Suspense pour la récupération de données. Mais rappelez-vous l’exigence de mise en cache—cela fonctionne mieux avec des frameworks ou des bibliothèques qui gèrent la stabilité des promesses.

Conclusion

Le rendu asynchrone de React 19 n’est pas un nouveau paradigme. C’est la couche d’abstraction manquante qui rend React concurrent pratique pour les workflows asynchrones quotidiens. En fournissant des APIs intégrées pour les états pending, la gestion des formulaires, les mises à jour optimistes et la résolution de promesses, React 19 élimine le code répétitif que les développeurs écrivaient depuis que React 18 a introduit le rendu concurrent. La fondation reste la même—ce qui a changé, c’est à quel point ces patterns sont devenus accessibles et standardisés.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.