Finally.... But it's exciting!

Summary

Dans cette vidéo, l’auteur explore les nouvelles fonctionnalités de React 19, notamment le compilateur React expérimental, qui simplifie l’optimisation du code, et les actions de formulaire qui permettent de gérer les soumissions sans l’événement `onSubmit`. Il présente également les nouveaux hooks comme `useFormStatus`, `useActionState` et `useOptimistic` pour une gestion améliorée des états de formulaire et des mises à jour UI optimistes. D’autres améliorations incluent la gestion des références plus simple, la consommation de contextes avec le hook `use` et les composants côté serveur avec React 19, le tout dans le cadre d’un projet Next.js. L’auteur conclut que la mise à jour vers React 19 est facile, mais certaines fonctionnalités nécessitent une configuration spécifique.

Takeaways

• 😀 Le compilateur React (en phase expérimentale) permet de simplifier le code React en appliquant des optimisations en arrière-plan, réduisant ainsi le besoin d'utiliser des hooks comme `useMemo` et `useCallback` manuellement.
• 😀 Avec React 19, il est désormais possible de gérer les soumissions de formulaires en utilisant la propriété `action` sur un élément `<form>`, ce qui simplifie la gestion des données envoyées sans nécessiter d'écoute de l'événement `submit`.
• 😀 Les nouvelles hooks `useFormStatus`, `useActionState` et `useOptimistic` facilitent la gestion des états des formulaires, la gestion des erreurs et la mise à jour optimiste de l'interface utilisateur.
• 😀 React 19 facilite le passage des refs aux composants personnalisés, permettant d'accepter et d'extraire directement la propriété `ref`, sans avoir besoin de `forwardRef`.
• 😀 Le gestionnaire de contexte a été amélioré, permettant d'utiliser l'objet de contexte comme un fournisseur directement, simplifiant ainsi l'usage du contexte dans vos composants.
• 😀 Le hook `use` introduit dans React 19 permet de consommer un contexte ou de travailler avec des promesses, offrant plus de flexibilité que le traditionnel `useContext`.
• 😀 React 19 stabilise les composants serveur et les actions serveur, ce qui permet d'exécuter du code côté serveur pour améliorer les performances, comme l'utilisation d'`async await` pour récupérer des données avant de rendre l'UI.
• 😀 Les composants serveur ne sont rendus que sur le serveur, tandis que les composants client peuvent être rendus à la fois côté serveur et côté client, offrant une séparation claire des responsabilités.
• 😀 Les actions serveur permettent de traiter les soumissions de formulaires côté serveur, avec un accès sécurisé aux bases de données, contrairement aux actions côté client qui sont limitées à des traitements côté client.
• 😀 React 19 simplifie la gestion des métadonnées et des titres de page en permettant d'insérer directement des balises `title` et `meta` dans vos composants, ce qui améliore l'intégration SEO de vos applications.

Q & A

Quelles sont les nouvelles fonctionnalités introduites dans React 19 ?

React 19 introduit plusieurs nouvelles fonctionnalités, telles que les actions de formulaire, de nouveaux hooks comme `useFormStatus`, `useActionState`, et `useOptimistic`, une meilleure gestion des refs pour les composants personnalisés, et la simplification de l'utilisation du contexte via le hook `use`. Il y a aussi des améliorations pour les composants côté serveur et côté client dans un projet Next.js.

Qu'est-ce que le compilateur React et comment fonctionne-t-il dans React 19 ?

Le compilateur React est un outil expérimental qui simplifie le code React en ajoutant des optimisations, comme l'utilisation de `memo`, `useMemo` ou `useCallback`, derrière les coulisses lors du processus de build. Cela permet d'éviter d'écrire ces optimisations manuellement, mais il n'est pas encore stable et prêt pour la production.

Comment utiliser les actions de formulaire dans React 19 ?

Les actions de formulaire permettent de gérer les soumissions de formulaire sans écouter l'événement `submit`. Vous pouvez utiliser la prop `action` sur un élément `form` et lier cette prop à une fonction. Cette fonction reçoit un objet `formData` contenant les valeurs soumises. Les actions de formulaire peuvent être synchrones ou asynchrones et ne nécessitent aucune configuration serveur.

Quel est le rôle du hook `useFormStatus` ?

Le hook `useFormStatus` permet d'obtenir des informations sur l'état actuel d'un formulaire, ce qui peut être utile pour désactiver un bouton ou modifier un texte pendant la soumission du formulaire. Il doit être utilisé dans un composant imbriqué dans un formulaire qui utilise une action de formulaire.

Comment React 19 simplifie la gestion des refs pour les composants personnalisés ?

Avec React 19, il n'est plus nécessaire d'utiliser `forwardRef` pour transmettre une ref à un composant personnalisé. Vous pouvez directement accepter et extraire la prop `ref`, ce qui simplifie le code tout en restant compatible avec les versions antérieures.

Quelle est la différence entre le hook `useContext` et le nouveau hook `use` dans React 19 ?

Le hook `useContext` reste inchangé et permet de consommer un contexte dans un composant. Cependant, `use` est un nouveau hook plus flexible qui ne respecte pas toutes les règles habituelles des hooks. Par exemple, il peut être utilisé dans une instruction `if`, ce qui n'est pas autorisé pour les autres hooks.

Qu'est-ce que le hook `use` et comment fonctionne-t-il avec les promesses ?

Le hook `use` permet de travailler avec des promesses, mais il ne fonctionne actuellement qu'avec des promesses créées par des bibliothèques qui intègrent la fonctionnalité de suspense de React, ou des promesses côté serveur passées au client. Lorsqu'il est utilisé dans un projet Next.js, `use` permet de gérer les promesses plus facilement avec l'aide de suspense pour afficher un état de chargement.

Quelles sont les exigences nécessaires pour utiliser les composants côté serveur dans React 19 ?

Pour utiliser les composants côté serveur, il faut un projet avec une configuration spéciale, comme un projet Next.js. Ces composants ne sont rendus que sur le serveur, ce qui permet de charger les données côté serveur avant d'envoyer la page au client. Les composants côté client doivent être marqués explicitement avec la directive `use client`.

Comment les actions de serveur fonctionnent-elles dans React 19 ?

Les actions de serveur permettent de traiter des soumissions de formulaires sur le serveur. Elles nécessitent l'utilisation de la directive `use server` dans une fonction d'action ou dans un fichier qui contient des actions serveur. Lorsqu'une soumission est effectuée, une requête HTTP est envoyée au serveur, permettant des opérations comme l'accès à une base de données.

Quels sont les avantages des améliorations apportées à la gestion du titre et des métadonnées dans React 19 ?

Avec React 19, vous pouvez facilement ajouter des balises `title` et `meta` directement dans vos composants, ce qui permet une gestion plus simple et plus dynamique du titre de la page et des métadonnées sans avoir à manipuler manuellement le contenu de l'en-tête du document.