React 19

 (github.com/facebook)
2 points par GN⁺ 2024-12-06 | 1 commentaires | Partager sur WhatsApp

19.0.0 (5 décembre 2024)

Nouvelles fonctionnalités

React
  • Actions : startTransition peut désormais accepter des fonctions asynchrones. Ces fonctions sont appelées « Actions » et permettent de mettre à jour l’état en arrière-plan puis de valider l’UI en une seule fois. Les Actions peuvent exécuter des effets de bord comme des requêtes asynchrones, et la Transition attend la fin du travail avant de se terminer.
  • useActionState : nouveau hook permettant d’ordonner les Actions dans une Transition et d’accéder à l’état. Il accepte un état initial et un reducer.
  • useOptimistic : nouveau hook permettant de mettre à jour l’état pendant qu’une Transition est en cours. Une fois la Transition terminée, l’état est mis à jour avec la nouvelle valeur.
  • use : nouvelle API permettant de lire des ressources pendant le rendu. Elle accepte une Promise ou un Context, et si une Promise est fournie, le rendu est suspendu jusqu’à la résolution de la valeur.
  • Utiliser ref comme prop : il est désormais possible d’utiliser ref comme prop sans avoir besoin de forwardRef.
  • Préchauffage des siblings Suspense : lorsqu’un composant est suspendu, React valide immédiatement le fallback de la frontière Suspense la plus proche.
Client React DOM
  • Prop action de <form> : les Form Actions gèrent automatiquement les formulaires et s’intègrent à useFormStatus. Le formulaire est automatiquement réinitialisé en cas de succès.
  • Prise en charge des métadonnées du document : il est possible de rendre nativement les balises de métadonnées du document depuis les composants.
  • Prise en charge des feuilles de style : insère les feuilles de style dans le <head> du client avant de révéler le contenu d’une frontière Suspense.
  • Prise en charge des scripts asynchrones : il est possible de rendre des scripts asynchrones depuis n’importe où dans l’arbre de composants.
Serveur React DOM
  • Ajout des API prerender et prerenderToNodeStream : API destinées à la génération de sites statiques, conçues pour fonctionner dans des environnements de streaming comme les flux Node.js et les flux web.
Composants serveur React
  • Fonctionnalités RSC : les directives, les composants serveur et les fonctions serveur sont désormais stabilisés. Les bibliothèques incluant des composants serveur peuvent maintenant cibler React 19 comme dépendance pair.

Obsolescences prévues

  • Accès à element.ref : l’accès à element.ref est déprécié au profit de element.props.ref.
  • react-test-renderer : dans React 19, react-test-renderer émet un avertissement de dépréciation et bascule vers le rendu concurrent pour l’usage web.

Changements majeurs

React
  • Nouvelle transformation JSX requise : la nouvelle transformation JSX est nécessaire pour améliorer la taille des bundles et permettre l’utilisation de JSX sans importer React.
  • Les erreurs de rendu ne sont plus relancées : si une erreur n’est pas interceptée par un Error Boundary, elle est signalée à window.reportError.
  • Suppression de propTypes : l’utilisation de propTypes est désormais ignorée silencieusement. Une migration vers TypeScript est recommandée.
  • Suppression de defaultProps pour les fonctions : les paramètres par défaut ES6 peuvent être utilisés à la place.
  • Suppression des refs de type chaîne : l’utilisation des refs sous forme de chaînes doit être migrée vers des callbacks de ref.
React DOM
  • Suppression de react-dom/test-utils : act a été déplacé de react-dom/test-utils vers react. Les autres utilitaires ont été supprimés.
  • Suppression de ReactDOM.render, ReactDOM.hydrate : remplacés par ReactDOM.createRoot et ReactDOM.hydrateRoot pour le rendu concurrent.

Changements notables

React
  • Utiliser <Context> comme provider : il est désormais possible de rendre <Context> comme provider à la place de <Context.Provider>.
  • Prise en charge des éléments personnalisés : React 19 réussit désormais tous les tests des custom elements.
  • Changements dans StrictMode : useMemo et useCallback réutilisent maintenant le résultat de mémoïsation du premier rendu.
React DOM
  • Différences pour les erreurs d’hydratation : en cas de divergence, React 19 consigne une seule erreur incluant les différences du contenu non concordant.

Changements TypeScript

  • Retours implicites interdits : les refs n’acceptent désormais que des fonctions de nettoyage. Les retours implicites provoquent maintenant une erreur.
  • Argument initial requis pour useRef : l’argument initial est désormais obligatoire.
  • Typage plus strict de ReactElement : les props des éléments React utilisent désormais unknown par défaut au lieu de any.

À lire aussi

1 commentaires

 
GN⁺ 2024-12-06
Avis sur Hacker News

  • Certains estiment qu'il est possible et agréable de construire des applications évolutives avec React

    • Grâce au support de TS et aux bibliothèques de la communauté, ils pensent qu'il est facile de construire et de faire évoluer des applications
    • Ils ne comprennent pas pourquoi les nouvelles fonctionnalités effraient autant les gens
    • Certains estiment que Jetpack Compose et Swift UI se sont inspirés de React
    • Ils se demandent si, par le passé, il était vraiment agréable de construire de grandes applications web avec jQuery ou du plain JS

  • Certains ont une opinion positive de la nouvelle version de React, tout en craignant qu'il soit difficile pour les débutants de se lancer

    • Ils considèrent que React reste un excellent framework et que cette version apporte des améliorations
    • Les critiques visent moins React lui-même que le développement front-end dans son ensemble

  • Certains estiment que la complexité des frameworks côté client est en augmentation

    • Ils ont le sentiment que la complexité augmente partout, que ce soit dans le backend, le frontend ou les stacks DevOps

  • L'ajout de la fonctionnalité ref as a prop dans la nouvelle version est évalué positivement, car elle rend forwardRef inutile

  • Jotai, présenté comme un clone de Recoil, est mentionné à la place de Redux et signalé comme compatible avec React 19

    • Certains pensent qu'avec la complexité du frontend, un autre gestionnaire d'état peut devenir une gêne

  • Certains souhaitent un changement de nom pour l'API use

    • Ils pensent que cela peut dérouter les personnes qui découvrent les hooks React

  • Le fait d'avoir retardé la sortie pour résoudre le problème de suspense parallèle est salué positivement

  • Certains se demandent s'il est possible de construire le hook useActionState à partir des hooks intégrés existants

  • L'ajout de fonctionnalités qui encouragent l'usage des technologies web standard et améliorent la qualité de vie est apprécié positivement

    • Ils sont déçus que le déclenchement de suspense nécessite toujours le support d'un framework
    • Ils ont essayé de comprendre le mécanisme de suspense via TanStack Query, sans succès