Chapitre 4 : Introduction aux hooks
Hooks, Règles des hooks, Re-render
Qu'est-ce qu'un hook ?
Les hooks sont une nouveauté de React 16.8 (ReactJS).
Un hook est une fonction React dont le nom commence par “use”. Il doit utiliser l’état, le cycle de vie, le contexte, etc., dans des composants fonctionnels, sans classes.
React possède ses propres hooks (dont useState et useEffect qui seront détaillés dans les chapitres suivants), mais il est également possible d’écrire ses propres hooks. C’est ce qu’on appelle des “custom hooks”.
Règles conceptuelles des hooks
Les hooks suivent des règles simples :
- ils s’utilisent uniquement dans des composants fonction React
- ils doivent être appelés au même endroit à chaque rendu
- ils ne doivent pas être appelés dans des conditions ou des boucles
Ces règles garantissent que React puisse gérer correctement leur comportement.
Hooks et re-render
Quand l’état d’un composant est modifié (par un hook ou autre interaction) :
- React déclenche un nouveau rendu
- le composant est réévalué
- l’interface est mise à jour
Les hooks sont directement liés au mécanisme de re-render.
Liens utiles :
https://www.geeksforgeeks.org/reactjs/difference-between-virtual-dom-and-real-dom/
Questions clés (validation des acquis du chapitre)
- Pourquoi les hooks ont-ils été introduits ? Pour permettre aux composants fonctionnels de gérer de l’état et des comportements avancés.
- Qu’est-ce qu’un hook ? Une fonction générique spéciale qui est liée au cycle de vie React.
- Pourquoi les hooks ne doivent pas être appelés dans des conditions ? Pour garantir un ordre d’appel constant à chaque rendu.
- Comment nomme-t-on un hook ? Avec le préfixe use
Chapitre 5 : Etat et interactions (useState)
Concepts clés abordés
- Etat local
- Mise à jour de l’état
- Interactions utilisateur
Etat local
L’état représente les données dynamiques d’un composant, celles qui peuvent évoluer dans le temps. Il est géré avec le hook useState. L’état permet de stocker des informations (comme un compteur, un texte saisi ou une sélection). Chaque mise à jour d’état entraîne un nouveau rendu du composant.
Mise à jour de l’état
L’état ne doit jamais être modifié directement. React fournit une fonction dédiée pour mettre à jour l’état de manière contrôlée. Cette règle garantit que React peut détecter correctement les changements. Elle évite aussi des comportements imprévisibles dans l’interface.
Chaque mise à jour des states génère un re-render de React pour vérifier si la nouvelle props change l’affichage ou pas.
Interactions utilisateur
Les interactions utilisateur, comme les clics ou les saisies, sont gérées via des événements. Ces événements déclenchent des mises à jour de l’état. React met alors automatiquement à jour l’interface. Ce mécanisme est au cœur de l’interactivité des applications React.
Questions clés (validation des acquis du chapitre)
- Qu’est-ce que l’état local ? Ce sont des données propres à un composant, susceptibles d’évoluer dans le temps.
- Pourquoi l’état doit-il être immuable ? Pour permettre à React de détecter correctement les changements et déclencher les re-renders. Si l’état est mis à jour en dehors du setState, alors React serait désynchronisé de l’état.
- Quel est le lien entre interaction et re-render ? Une interaction modifie l’état, ce qui déclenche un nouveau rendu du composant.
Exercices :
Exercice 1 - Utiliser useState
- Créer un composant React “Compteur”
- Ce composant affiche un nombre initialisé à 0 et contient un bouton “increment”
- Chaque clic sur le bouton, le nombre affiché augmente de 1
Il faut utiliser le hook useState pour stocker l’état du nombre, et sa mise à jour.
Exercices 2
Pour approfondir : https://react.dev/learn/managing-state
Exercice 3 - Tic tac Toe
Afin de valider tes acquis de ces derniers chapitres, tu peux effectuer l’exercice du Tic Tac Toe : https://react.dev/learn/tutorial-tic-tac-toe
Liens utiles :
https://dmitripavlutin.com/react-usestate-hook-guide/
Chapitre 6 : Effets et synchronisation(useEffect)
Concepts clés abordés
- Hook useEffect
Hook useEffect
Un composant React a pour rôle principal de décrire une interface. Il ne doit pas contenir directement du code qui provoque des actions extérieures (appel réseau, timer, abonnement).
useEffect est le hook qui permet d’exécuter ce type de code après que le composant ait été affiché à l’écran (et non pendant). Il contient :
- une fonction contenant l’effet
- le retour est optionnel il permet de faire un clean up.
- un tableau de dépendances
Le tableau de dépendances doit contenir tout objet défini en dehors du useEffect. Il permet de dire à React quand le code dans l’effet doit s’exécuter. C’est comme une liste de choses à surveiller. Les différents cas sont :
- pas de tableau: l’effet s’exécute après chaque affichage (rendu)
- tableau vide: l’effet s’exécute une seule fois, après le premier affichage
- avec dépendances: l’effet s’exécute à chaque fois qu’une des dépendances change
Exemple :
J’ai un composant “UsersList”, et j’ai besoin de récupérer la liste des utilisateurs sur un serveur.
Le composant possède dans son état interne une liste de “users”, appelé “users” et qui peut être mis à jour avec “setUsers”.
Il fetch les données dans le useEffect, et met à jour la liste des users.
Une fois la liste des users mis à jour, le composant se met à jour pour afficher le contenu de la nouvelle liste.
Questions clés (validation des acquis du chapitre)
- A quoi sert useEffect ? À exécuter du code après l’affichage du composant, afin de
- Quand est-il exécuté ? Après le rendu, selon le tableau de dépendances.
- A quoi sert le tableau de dépendances ? À contrôler quand l’effet doit se déclencher.
Exercices :
Exercice - Utiliser useEffect
Voici le code qui te permet de récupérer de la data de faux produits afin que tu puisses travailler sur de la vraie donnée :
fetch('https://fakestoreapi.com/products/1')
.then(res=>res.json())
.then(json=>console.log(json))
- Créer un composant “ProductsList”
- Reprendre le composant “Article” des exercices précédents, et y insérer le nouveau composant.
- Fetch les données via l’appel API
- ProductsList doit afficher les fake produits retournés
- Bonus : Ajouter un bouton “refresh” qui permet de rafraichir la data des produits.
Utiliser useEffect et le tableau de dépendances.
Liens utiles :
https://dmitripavlutin.com/react-useeffect-explanation/
https://fr.react.dev/reference/react/useEffect
Chapitre 7 : Asynchrone et appels API en React
Concepts clés abordés
- Appels asynchrones
- Appels API
- Gestion des états
Appels asynchrones
Un appel API prend du temps : il dépend du réseau et d’un serveur externe. JavaScript étant mono-thread, ces opérations doivent être asynchrones pour ne pas bloquer l’interface.
En pratique, cela signifie :
- l’appel est lancé
- le code continue de s’exécuter
- le résultat arrive plus tard
En React, cette réalité a un impact direct sur l’interface utilisateur.
Appels API
Les appels API ne peuvent pas être faits dans le rendu car le rendu d’un composant React doit rester pur et prévisible. Il ne doit pas provoquer d’effets externes comme un appel réseau.
Si un appel API était fait directement dans le corps du composant :
- il serait déclenché à chaque rendu
- cela provoquerait des appels multiples
- l’application deviendrait instable
Ces appels doivent donc être placés dans des “effets” (cf chapitre 6). On utilise généralement useEffect.
Cela permet de lancer l’appel au chargement du composant ou lorsque certaines données changent.
Gestion des états
Un appel API implique toujours plusieurs états possibles :
- les données ne sont pas encore chargées
- les données sont disponibles
- une erreur est survenue
Il est donc courant d’utiliser plusieurs états :
- un état pour les données
- un état pour le chargement
- un état pour les erreurs
Cette gestion permet d’afficher une interface claire et réactive.
L’état de chargement :
L’utilisateur doit être informé qu’une action est en cours. Un état de chargement permet d’afficher un message ou un indicateur visuel.
Sans cet état, l’interface semble figée et l’utilisateur ne comprend pas ce qu’il se passe
La gestion des erreurs :
Un appel API peut échouer pour de nombreuses raisons. Il est important de capturer ces erreurs et de les afficher proprement.
Un état d’erreur permet d’informer l’utilisateur, d’éviter un affichage cassé et de garder une application robuste
En résumé, un flux complet correspond à :
- le composant s’affiche
- useEffect lance l’appel API
- l’état loading passe à true
- les données sont reçues ou une erreur survient
- l’interface se met à jour
Questions clés (validation des acquis du chapitre)
- Pourquoi les appels API sont-ils asynchrones ? Parce qu’ils dépendent de ressources externes et prennent du temps.
- Pourquoi ne pas appeler une API dans le rendu ? Parce que le rendu doit rester pur et ne pas provoquer d’effets.
- Où placer un appel API en React ? Dans un useEffect.
- Pourquoi gérer un état de chargement ? Pour informer l’utilisateur et améliorer l’expérience.
- Pourquoi gérer les erreurs ? Pour rendre l’application fiable et compréhensible.
Exercices :
Exercice - Simulation d’un appel API et rendus
- Créer un composant qui affiche un message “Chargement…”
- L’appel API est simulé avec un setTimeout
- Afficher “Données chargées” une fois le timeout écoulé.
- Simuler également un cas d’échec et afficher le message “Erreur lors du chargement des données”
Attention à bien utiliser useEffect, et les états de React pour gérer tout ça.
Chapitre 8 : Custom hooks
Concepts clés abordés
- Custom hook
- Règles des hooks
Custom hook
Un custom hook est une fonction JavaScript qui permet d’extraire et de réutiliser de la logique React basée sur les hooks. Il s’agit d’un moyen de partager du comportement entre plusieurs composants sans dupliquer le code.
Lorsqu’une même logique est utilisée dans plusieurs composants (gestion d’état, appels API, effets), il est recommandé de l’extraire dans un custom hook. Cela permet de garder les composants plus simples et plus lisibles, tout en centralisant la logique dans un seul endroit.
Un custom hook permet à plusieurs composants d’utiliser la même logique tout en conservant leur propre état. Chaque appel du hook est indépendant : les composants ne partagent pas directement les valeurs, mais la logique qui les produit. Cela garantit un comportement prévisible et isolé.
En déplaçant la logique complexe dans des custom hooks, les composants deviennent plus orientés “UI” et plus faciles à lire. Les hooks personnalisés améliorent également l’organisation du projet en séparant clairement la logique métier de l’affichage.
Règle des hooks
Les custom hooks doivent respecter les mêmes règles que les hooks React. Ils doivent être appelés uniquement au niveau supérieur d’un composant ou d’un autre hook, et jamais à l’intérieur de conditions ou de boucles. De plus, un custom hook doit obligatoirement commencer par le préfixe use afin que React puisse appliquer correctement ses règles.
Questions clés (validation des acquis du chapitre)
- Pourquoi utilise-t-on des custom hooks ? Les custom hooks servent à extraire de la logique commune, à éviter la duplication de code et à rendre les composants plus simples, plus lisibles et plus faciles à maintenir.
- Quelles règles doivent respecter les custom hooks ?
Un custom hook doit commencer par le préfixe use, être appelé uniquement au niveau supérieur d’un composant ou d’un autre hook, et ne jamais être appelé dans une condition, une boucle ou une fonction imbriquée. - En quoi un custom hook améliore-t-il la lisibilité d’un composant ? En déplaçant la logique complexe dans un custom hook, le composant se concentre principalement sur l’affichage, ce qui rend le code plus clair, plus court et plus facile à comprendre.
Liens utiles :
https://devtrium.com/posts/react-typescript-how-to-type-hooks
https://www.joshwcomeau.com/react/usememo-and-usecallback/
Chapitre 9 : Composants contrôlés
Concepts clés abordés
- Les interactions utilisateurs en React
- Evénements
- Composants contrôlés
- Synchronisation UI / état
Les interactions utilisateurs en React
Une application React est interactive : l’utilisateur clique, saisit du texte, sélectionne des options. Ces interactions doivent modifier l’état de l’application afin que l’interface se mette à jour. En React, toute interaction suit le même principe :
Interaction utilisateur → événement → mise à jour de l’état → re-render
Les événements en React
Les événements permettent à l’utilisateur d’interagir avec l’application React. Les plus courants sont :
- onClick
- onChange
- onSubmit
Ces événements déclenchent du code en réponse aux actions de l’utilisateur.
Exemple : Afficher un texte après le clic d’un bouton
Pour qu’une interaction ait un impact sur l’interface, elle doit modifier l’état. C’est pourquoi les valeurs saisies par l’utilisateur sont généralement stockées dans l’état du composant. L’état devient la source de vérité de l’interface.
Les composants contrôlés
Un composant contrôlé est un élément d’interface dont la valeur est entièrement pilotée par l’état React.
L’utilisateur ne modifie pas directement l’élément : il déclenche un événement qui met à jour l’état.
Cette approche permet :
- de lire et modifier facilement la valeur
- de déclencher des traitements ou validations
- de garder un comportement prévisible
Synchronisation UI / Etat
La synchronisation entre l’interface et l’état garantit que :
- ce que l’utilisateur voit correspond aux données internes
- toute modification passe par un chemin clair
Si l’état change, l’interface se met à jour automatiquement. Si l’utilisateur interagit avec l’interface, l’état est mis à jour.
Puisque toutes les valeurs sont stockées dans l’état, il devient facile d’appliquer des règles (exemple: champ obligatoire, longueur minimale, format attendu)
La validation se fait directement à partir de l’état, avant de déclencher une action. Même simple, cette logique améliore la fiabilité de l’application.
Cas concret simple : les formulaires, ce n’est finalement qu’un ensemble d’entrées utilisateur contrôlées.
Questions clés (validation des acquis du chapitre)
- Comment React gère-t-il les interactions utilisateur ? Via des événements qui déclenchent des mises à jour de l’état.
- Qu’est-ce qu’un composant contrôlé ? Un composant dont la valeur est définie et contrôlée par l’état React.
- Pourquoi l’état est-il la source de vérité ? Parce que l’interface se base toujours sur l’état pour s’afficher.
- Quel est le lien entre événement et re-render ? Un événement met à jour l’état, ce qui provoque un nouveau rendu.
Exercices :
Exercice - Création d’un formulaire
- Créer un composant “Formulaire” qui contient 2 champs texte correspondant au nom et au mail de la personne. Il contient aussi un bouton “Submit”.
- La valeur saisie dans chaque champ doit être affichée en temps réel.
- Pas de contraintes sur le champs “Nom”, mais le champ “Mail” doit au moins vérifier que la valeur saisie contient un “@”.
- Le bouton “Submit” est désactivé si l’un des 2 champs est vide, ou bien ne respecte pas la règle métier.
- Si les valeurs sont correctes, le bouton “Submit” est cliquable et log “Formulaire envoyé” (console.log(“Formulaire envoyé”).
Exercice - Le Cadenas
https://docs.google.com/document/d/1Mgm8pwB-lC74zsuBfHluxU00u87nVHW5DE8An7zQrfw/edit?usp=sharing
Chapitre 10 : État partagé et contexte
Concepts clés abordés
- État partagé
- Le contexte
État partagé
Dans une application React, chaque composant possède son propre état. Cependant, certaines données doivent être accessibles à plusieurs composants en même temps (par exemple, l’utilisateur connecté à une session).
Partager l’état permet de garantir que tous les composants utilisent la même information et restent synchronisés. Sans cela, il devient difficile de maintenir une application cohérente.
Nous avons vu plus tôt que les composants parents partageaient des props vers les composants enfants. Cette approche est claire et respecte le flux de données unidirectionnel de React.Cependant, lorsque l’arborescence est trop profonde, ce n’est pas pratique car il faut transmettre l’information d’une couche à l’autre en passant par plusieurs autres couches qui n’ont sûrement pas besoin de l’information. Ce problème s’appelle le prop drilling.
Pour résoudre ce problème, React a introduit le contexte.
Le Context
Le Context est un mécanisme fourni par React pour partager des données sans passer explicitement par les props. Il permet de rendre une valeur disponible à tous les composants situés dans une partie de l’arborescence.
Un Context est défini une seule fois, puis fourni via un Provider.
Les composants enfants peuvent ensuite consommer cette valeur, où qu’ils se trouvent dans l’arbre.
Le Context est particulièrement adapté aux données dites globales, comme :
- l’utilisateur connecté
- le thème (clair / sombre)
- la langue de l’application
- des paramètres de configuration
Il permet de centraliser ces informations et d’éviter le prop drilling. Cependant, il ne doit pas être utilisé pour tous les états de l’application. Un usage excessif peut rendre le flux de données moins explicite et compliquer le débogage.
Bonnes pratiques :
- Penser d’abord aux props : toujours se demander en premier lieu si l’information peut être placée dans un composant parent, qui la transmettra aux composants enfants. Cela permet de bien identifier d’où viennent les informations.
- Si ce n’est pas possible et que trop de composants éparpillés de l’application ont besoin de la même information, alors utiliser le context.
- Attention à bien structurer le context
Questions clés (validation des acquis du chapitre)
- Pourquoi certains états doivent-ils être partagés ? Pour garantir que plusieurs composants utilisent la même donnée synchronisée.
- Qu’est-ce que le prop drilling ? Le fait de passer des props à travers plusieurs composants intermédiaires inutilement.
- À quoi sert le Context ? À partager des données sans les passer via les props.
- Dans quels cas utiliser le Context ? Pour des données globales comme l’utilisateur, le thème ou la langue. Ces données doivent peu changer (car un changement du contexte génère un re-rendu de tous ses enfants).
Exercices :
Exercice - Partager des informations à traver le context
https://fr.react.dev/reference/react/createContext
- Reprendre l’application React avec le composant “Article”
- Créer un contexte et y stocker le thème de l’application “Dark” ou “Light”
- Récupérer cette information et mettre à jour le thème en fonction (background foncé ou background clair)
Liens utiles:
https://dmitripavlutin.com/react-context-and-usecontext/
Chapitre 11 : Navigation (React Router)
Concepts clés abordés
- Le routing
- Single Page Application (SPA)
- React Router
Le routing
Dans une application web classique, changer de page provoque un rechargement complet du navigateur. Dans une application React, on cherche au contraire à offrir une navigation fluide, sans recharger toute l’application.
Le routing permet d’afficher différents composants selon l’URL, tout en restant dans une Single Page Application. L’application charge une seule fois, puis React gère les changements de vue.
Single Page Application (SPA)
Une Single Page Application est une application qui fonctionne sur une seule page HTML.
Les changements de “pages” correspondent en réalité à des changements de composants affichés.
Cela permet :
- une navigation plus rapide
- une meilleure expérience utilisateur
- un contrôle total de l’interface côté client
React est particulièrement adapté à ce type d’architecture.
React Router
React Router est la bibliothèque la plus utilisée pour gérer la navigation dans une application React.
Elle permet de relier une URL à un composant spécifique.
En fonction de l’URL actuelle, React Router décide quel composant doit être affiché. Le développeur définit ces règles de navigation dans l’application Une route associe donc un chemin (URL) à un composant React.
Exemple:
- “/” : Page d’accueil
- “/about” : Page “à propos”
Il est possible de définir des routes avec des paramètres, qui peuvent être dynamiques (comme un identifiant). Exemple : afficher le profil d’un utilisateur. Le composant peut ensuite récupérer ces paramètres pour charger les données correspondantes.
Liens :
https://reactrouter.com/home
Questions clés (validation des acquis du chapitre)
- Pourquoi a-t-on besoin de routing dans une application React ? Pour afficher différentes pages sans recharger toute l’application.
- Qu’est-ce qu’une SPA ? Une application où la navigation se fait sans rechargement complet de la page.
- Quel est le rôle de React Router ? Associer des URLs à des composants React.
- Pourquoi éviter les liens HTML classiques ? Parce qu’ils provoquent un rechargement complet de la page.
- À quoi servent les paramètres de route ? À afficher des pages dynamiques basées sur l’URL.
Exercices :
Exercice - Effectuer un routing simple
- Créer une application avec :
- une page “Accueil”
- une page “À propos”
- une page “Détail” accessible via un paramètre d’URL
- Permettre à l’utilisateur de naviguer entre ces pages sans rechargement, uniquement grâce au routing.
- Utiliser React router. Faire attention à utiliser des paramètres pertinents, et récupérer le paramètre “id” de l’URL pour l’afficher sur la page “Détail”
Pour cela, regarder la doc sur React Router : https://reactrouter.com/home
Chapitre 12 : Structuration et bonnes pratiques en React
Concepts clés abordés
- Organisation des dossiers et fichiers
- Responsabilité unique des composants
- Composants de présentation vs composants logiques
- Réutilisabilité et factorisation
- Lisibilité et conventions
Organisation des dossiers et fichiers
Une bonne structuration de projet facilite la compréhension, la maintenance et l’évolution d’une application React. En général, on regroupe les fichiers par fonctionnalité (feature-based) ou par type (components, hooks, services, pages). Une structure claire permet à un nouveau développeur de comprendre rapidement où se trouve le code et à quoi il sert. Il est aussi recommandé de garder les composants, styles et tests associés proches les uns des autres.
Cas concrets:
Organisation par type
Organisation par fonctionnalité (recommandé, souvent ce qui est utilisé pour les gros projets)
Pour une feature, il est courant de regrouper, dans un même dossier, tous les fichiers liés qui y sont liés : le composant React principal, les sous-composants, les styles, les tests, les services, etc... Cette pratique permet de retrouver rapidement tout ce qui concerne un composant et d'améliorer la maintenabilité du code.
Enfin, quelle que soit la structure choisie, l’objectif principal reste la lisibilité. Une structure simple, cohérente et partagée par l’équipe est toujours préférable à une organisation trop complexe ou sur-optimisée.
Responsabilité unique des composants
Chaque composant React doit idéalement avoir une responsabilité unique. Cela signifie qu’un composant ne devrait faire qu’une seule chose, et la faire bien. Cette approche rend les composants plus simples, plus faciles à tester et à réutiliser. Si un composant devient trop long ou trop complexe, c’est souvent un signal qu’il doit être découpé en plusieurs sous-composants.
Composants de présentation vs composants logiques
Une bonne pratique consiste à distinguer les composants qui gèrent la logique (état, appels API, calculs) de ceux qui se concentrent sur l’affichage.
Les composants de présentation reçoivent des données via les props et affichent l’interface, tandis que les composants logiques orchestrent le comportement de l’application. Cette séparation améliore la lisibilité et favorise la réutilisation des composants visuels.
Réutilisabilité et factorisation
React encourage la création de composants réutilisables. Lorsqu’un même morceau d’interface ou de logique est utilisé à plusieurs endroits, il est préférable de le factoriser dans un composant ou un hook personnalisé. Cela évite la duplication de code, réduit les erreurs et facilite les évolutions futures.
Lisibilité et conventions
Un code lisible est aussi important qu’un code fonctionnel. L’utilisation de conventions claires améliore la compréhension du projet :
- nom des composants en PascalCase
- nom des hooks avec le préfixe use et en camelCase
- bonne indentation
- nommer ses composants, fonctions, hooks etc de manière claire
Questions clés (validation des acquis du chapitre)
- Pourquoi est-il important de bien structurer un projet React ? Une bonne structuration permet de mieux comprendre le projet, de faciliter la maintenance, d’améliorer la collaboration en équipe et de rendre l’application plus évolutive à long terme.
- Qu’entend-on par “responsabilité unique” d’un composant ? Un composant doit avoir un seul rôle clairement défini. Il ne doit pas gérer plusieurs responsabilités à la fois (affichage, logique complexe, appels API, etc.), afin de rester simple, lisible et réutilisable.
- Quelle est la différence entre un composant de présentation et un composant logique ? Un composant de présentation se concentre uniquement sur l’affichage et reçoit ses données via les props et est générique. Un composant logique gère l’état, la logique métier et les interactions, puis transmet les données aux composants de présentation.
- Pourquoi la réutilisabilité est-elle un objectif important en React ? La réutilisabilité permet d’éviter la duplication de code, de réduire les erreurs et de faciliter les évolutions. Un composant réutilisable peut être utilisé à plusieurs endroits sans être réécrit.
Exercices :
Exercice 1 - Organiser son code
Propose une structure de dossiers pour une application React contenant :
- une page d’accueil
- une page de profil utilisateur
- des composants réutilisables (bouton, modal)
- des appels API vers un serveur
Présente la structure sous forme d’arborescence de dossiers.
Exercice 2 – Responsabilité unique
On te fournit un composant React qui :
- affiche une liste d’utilisateurs
- gère un état de chargement
- effectue un appel API
Identifie les différentes responsabilités de ce composant et propose un découpage en plusieurs composants plus simples.
Pour aller plus loin :
React 19, dernière version en date, a apporté son lot de nouveautés :
- Fonction use, qui permet de lire la valeur d’un “context” ou d’une “promesse”
- Pour les refs, plus besoin d’utiliser “forwardRef” mais directement “ref”
- Nouvelles balises metadata (<title>, <meta>)
- nouveau hook useOptimistic
- Les servers components
- Les servers actions (et les nouveaux hooks useFormStatus et useActionState)
- Optimisation avec un nouveau compilateur
Pour approfondir ces notions :
https://believemy.com/fr/r/les-nouveautes-de-react-19
https://dyma.fr/blog/react-19-rc-quelles-nouveautes/