[Partie 1] Guide complet des hooks React et du mode de concurrence

Chapitre 1 : React évolue
1.1 Qu'est-ce que React ?
__1.1.1 Création d'interfaces utilisateur à partir de composants
1.1.2 Synchronisation de l'état et de l'interface utilisateur
__1.1.3 Comprendre les types de composants
1.2 Nouvelles fonctionnalités de React
1.3 Les hooks React peuvent ajouter un état aux composants fonctionnels.
1.3.1 Composants de fonctions avec état : écrivez moins de code, organisez-le mieux
__1.3.2 Hooks personnalisés : Réutilisation du code simplifiée
1.3.3 Points d'extension tiers fournissant des fonctionnalités préconfigurées et éprouvées
1.4 Meilleure expérience utilisateur grâce au rendu simultané et au suspense
__1.4.1 Rendu simultané
__1.4.2 Suspense
1.5 Nouveau canal de publication de code de React
1.6 Public cible de ce livre
À partir de la version 1.7
1.8 Résumé

Chapitre 2 : Gestion de l’état des composants avec le hook useState
2.1 Configuration de l'application de gestion des réservations
__2.1.1 Création d'une structure d'application avec create-react-app
__2.1.2 Modification de quatre fichiers principaux
__2.1.3 Ajout des fichiers de base de données requis par l'application
__2.1.4 Création d'un composant de page et du fichier UserPicker.js
2.2 Stockage, utilisation et définition des valeurs à l'aide de useState
__2.2.1 L'interface utilisateur ne change pas même lorsqu'une nouvelle valeur est attribuée à une variable.
__2.2.2 L'appel à useState renvoie une valeur et une fonction de mise à jour.
__2.2.3 L'appel de la fonction de mise à jour remplace la valeur précédente.
__2.2.4 Passage d'une fonction à useState avec des valeurs initiales
__2.2.5 Référence à l'état précédent lors de la définition d'un nouvel état
2.3 Appeler useState plusieurs fois pour gérer plusieurs valeurs
__2.3.1 Définition d'un état à l'aide d'une liste déroulante
__2.3.2 Définition du statut à l'aide de cases à cocher
2.4 Retour sur le concept de composant fonctionnel
2.5 Résumé

Chapitre 3 : Gestion de l’état des composants à l’aide du hook useReducer
3.1 Mise à jour de plusieurs valeurs d'état en réponse à un seul événement
3.1.1 Interrompre les utilisateurs par des changements d'état imprévisibles
3.1.2 Maintenir l'attention de l'utilisateur grâce à des changements d'état prévisibles
3.2 Gestion d'états plus complexes avec useReducer
3.2.1 Mise à jour de l'état à l'aide d'actions et de réducteurs prédéfinis
3.2.2 Création d'un réducteur pour le composant BookablesList
3.2.3 Accès à l'état du composant et envoi d'actions à l'aide de useReducer
3.3 Création d'un état initial à l'aide d'une fonction
__3.3.1 Présentation du composant WeekPicker
3.3.2 Création de fonctions utilitaires pour la gestion des dates et des semaines
3.3.3 Création d'un réducteur pour gérer la date du composant
__3.3.4 Passage d'une fonction d'initialisation au hook useReducer
3.3.5 Modification de la page de réservation pour utiliser le sélecteur de semaine
3.4 Réexamen du concept de réducteur d'utilisation
3.5 Résumé

Chapitre 4 : Utilisation des effets secondaires
4.1 Découverte de l'API useEffect avec un exemple simple
4.1.1 Effets secondaires d'exécution après chaque rendu
4.1.2 Les effets ne s'exécutent que lorsqu'un composant est monté.
4.1.3 Retourner une fonction pour nettoyer les effets secondaires
4.1.4 Contrôle du moment d'exécution des effets par la spécification des dépendances
__4.1.5 Résumé de la manière d'appeler le hook useEffect
__4.1.6 Appelez useLayoutEffect pour exécuter un effet avant que le navigateur ne redessine l'écran.
4.2 Lecture des données
4.2.1 Créer un nouveau fichier db.json
4.2.2 Configuration d'un serveur JSON
__4.2.3 Lecture des données dans le hook useEffect
4.2.4 Utilisation de async et await
4.3 Lecture des données destinées au composant BookablesList
4.3.1 Examen du processus de chargement des données
4.3.2 Modification du réducteur pour gérer les états de chargement et d'erreur
4.3.3 Création d'une fonction auxiliaire pour charger les données
4.3.4 Chargement des ressources réservables
4.4 Résumé

Chapitre 5 : Gestion de l’état des composants avec le hook useRef
5.1 Comment mettre à jour l'état sans déclencher un nouveau rendu
5.1.1 Comparaison de useState et useRef lors de la mise à jour des valeurs d'état
__5.1.2 Appel de useRef
5.2 Stockage de l'identifiant du minuteur à l'aide d'un objet de référence
5.3 Gestion des références aux éléments DOM
5.3.1 Mise en évidence d'un élément en réponse à un événement
5.3.2 Gestion des zones de texte à l'aide d'objets de référence
5.4 Résumé

Chapitre 6 : Gestion de l’état de l’application
6.1 Transmission d'un état partagé aux composants enfants
__6.1.1 Comment un parent transmet un état à son enfant en définissant ses propriétés
__6.1.2 Réception de l'état du composant parent via les props
6.1.3 Réception d'une fonction de mise à jour en tant que propriété du parent
6.2 Décomposition des composants en éléments plus petits
6.2.1 Affichage des composants dans le cadre d'une application plus vaste
6.2.2 Organisation de plusieurs composants au sein de l'interface utilisateur d'une page
__6.2.3 Création d'un composant BookableDetails
6.3 Partage d'état et répartition avec useReducer
6.3.1 Gestion de l'état dans le composant BookablesView
6.3.2 Suppression des actions des réducteurs
6.3.3 Réception de l'état et de l'envoi depuis le composant BookablesList
6.4 Partage des valeurs d'état et des fonctions de mise à jour obtenues à partir de useState
6.4.1 Gestion des ressources réservables sélectionnées dans le composant BookablesView
6.4.2 Transmission des ressources réservables et des fonctions de mise à jour au composant BookablesList
6.5 Passer une fonction à useCallback pour éviter la redéfinition de la fonction de rappel
6.5.1 Utilisation de fonctions que nous passons via les props
6.5.2 Maintien de l'identité de la fonction à l'aide du hook useCallback
6.6 Résumé

Chapitre 7 : Gestion de l’état avec useMemo
7.1 Brisez le cœur du chef en criant « O, shortcake ! »
__7.1.1 Générer des anagrammes avec des algorithmes coûteux
7.1.2 Comment éviter les appels de fonction en double
7.2 Mémorisation des appels de fonctions coûteux avec useMemo
7.3 Configuration des composants de la page de réservation
__7.3.1 Gestion des ressources réservables sélectionnées à l'aide de useState
__7.3.2 Gestion des états et réservations sélectionnés à l'aide de useReducer et useState
7.4 Création d'une grille de réservation efficace à l'aide de useMemo
7.4.1 Création d'une grille de sessions et de dates
7.4.2 Créer une requête pour une réservation existante
7.4.3 Fourniture de la fonction de chargement de données getBookings
__7.4.4 Création d'un composant BookingsGrid et appel de useMemo
7.4.5 Gestion des conflits de réponse lors de la lecture de données à l'aide de useEffect
7.5 Résumé

Chapitre 8 : Gestion de l’état avec l’API Context
8.1 Lorsque vous avez besoin d'un état stocké très haut dans l'arbre des composants
8.1.1 Affichage d'un message d'aide lors du premier chargement d'une page
8.1.2 Affichage des informations de réservation lorsqu'un visiteur sélectionne une réservation
8.1.3 Affichage d'un bouton Modifier pour les réservations créées par l'utilisateur : Problème
8.1.4 Affichage d'un bouton Modifier pour les réservations créées par l'utilisateur : Solution
8.2 Utilisation de fournisseurs personnalisés et de contextes multiples
8.2.1 Définition d'un objet comme valeur pour un fournisseur de contexte
8.2.2 Transfert d'état vers un fournisseur personnalisé
8.2.3 Utilisation de plusieurs contextes
8.2.4 Spécification des valeurs par défaut pour les contextes
8.3 Résumé

Chapitre 9 : Création de hooks personnalisés
9.1 Extraction de fonctionnalités dans des hooks personnalisés
9.1.1 Identification des fonctionnalités partageables
__9.1.2 Définition de hooks personnalisés en dehors du composant
__9.1.3 Appel d'un hook personnalisé à partir d'un hook personnalisé
9.2 Respectez les règles de l'hameçon
9.2.1 Appel des hooks uniquement au niveau supérieur
9.2.2 Appel des hooks uniquement à l'intérieur des fonctions React
__9.2.3 Utilisation du plugin ESLint pour appliquer les règles de hook
9.3 Autres exemples d'extraction de hooks personnalisés
__9.3.1 Obtention de la taille de la fenêtre à l'aide du hook useWindowSize
__9.3.2 Définition et lecture des valeurs à l'aide du hook useLocalStorage
9.4 Utilisation des valeurs de contexte à l'aide de hooks personnalisés
9.5 Encapsulation de la lecture des données avec des hooks personnalisés
__9.5.1 Création d'un hook useFetch
9.5.2 Utilisation des données, de l'état et des valeurs d'erreur renvoyées par useFetch
__9.5.3 Création d'un hook plus spécialisé pour la lecture des données : useBookings
9.6 Résumé

Chapitre 10 : Utilisation des hooks tiers
10.1 Accéder à l'état d'une URL avec React Router
__10.1.1 Configuration du chemin à inclure
__10.1.2 Ajout d'itinéraires imbriqués à la page Bookables
__10.1.3 Accès aux paramètres d'URL à l'aide du hook useParams
__10.1.4 Navigation à l'aide du hook useNavigate
10.2 Obtention et définition des paramètres de recherche de la chaîne de requête
10.2.1 Récupération des paramètres de recherche à partir de la chaîne de requête
__10.2.2 Définition de la chaîne de requête
10.3 Optimisation de la lecture des données avec les requêtes React
__10.3.1 Introduction aux requêtes React
__10.3.2 Rendre les composants accessibles au client de requêtes React
__10.3.3 Lecture des données à l'aide de useQuery
10.3.4 Comment accéder aux données du cache de requêtes
__10.3.5 Mise à jour de l'état du serveur à l'aide de useMutation
10.4 Résumé

[Partie 2] Chargement asynchrone des composants et des données à l'aide de limites de suspense et d'erreur

Chapitre 11 : Découpage du code avec suspense
11.1 Importation dynamique de code à l'aide de la fonction d'importation
__11.1.1 Configuration d'une page Web pour charger JavaScript lorsqu'on clique sur un bouton
__11.1.2 Utilisation des exportations par défaut et nommées
__11.1.3 Chargement de JavaScript à l'aide d'importations statiques
__11.1.4 Chargement dynamique de JavaScript par appel de la fonction d'importation
11.2 Importation dynamique de composants à l'aide de Lazy et Suspense
__11.2.1 Conversion d'un composant en composant paresseux à l'aide de la fonction lazy
__11.2.2 Spécification du contenu de repli à l'aide du composant Suspense
11.2.3 Comprendre le fonctionnement conjoint du chargement différé et du suspense
__11.2.4 Division des applications par chemin
11.3 Détection des erreurs à l'aide de limites d'erreur
__11.3.1 Examen des exemples de limites d'erreur fournis par la documentation React
__11.3.2 Créer nos propres limites d'erreur
__11.3.3 Récupération des erreurs
11.4 Résumé

Chapitre 12 : Intégration de la lecture des données et du suspense
12.1 Lecture des données et suspense
12.1.1 Mise à jour des promesses pour inclure l'État
12.1.2 Intégration du suspense à l'aide d'états de promesse
12.1.3 Lecture des données aussi rapide que possible
__12.1.4 Lecture de nouvelles données
__12.1.5 Récupération des erreurs
__12.1.6 Consultez la documentation React
12.2 Comment utiliser conjointement les requêtes React, le suspense et les limites d'erreur
12.3 Chargement d'images avec suspense
__12.3.1 Fourniture d'une solution de repli pendant le chargement d'images à l'aide de requêtes React et de Suspense
__12.3.2 Comment précharger des images ou des données à l'aide de requêtes React
12.4 Résumé

Chapitre 13 : Exercices et expérimentations avec useTransition, useDeferredValue et SuspenseList
13.1 Fluidifier les transitions d'état
__13.1.1 Éviter les états de repli avec useTransition
13.1.2 Fournir un retour d'information à l'utilisateur via isPending
__13.1.3 Intégration des composants et transitions communs
__13.1.4 Conservation des valeurs précédentes avec useDeferredValue
13.2 Utilisation de SuspenseList pour gérer plusieurs solutions de repli
13.2.1 Acquisition et affichage de données provenant de sources multiples
__13.2.2 Contrôle de plusieurs solutions de repli avec SuspenseList
13.3 React 18 et le mode de concurrence
13.4 Résumé

Annexe spéciale pour l'édition coréenne | Modification de l'application exemple pour l'adapter à React 18
A.1 Modifier le fichier package.json
A.2 Modification de la partie d'importation JSON
A.3 Modification de la partie de démarrage de l'application
A.4 Supprimer les éléments instables
A.5 Modifications liées au routage
A.6 Résolution du problème de la liste d'attente (solution de contournement)
__A.6.1 Comment exécuter le code original tel quel

│ Ce que ce livre aborde │
- Comment créer un composant fonctionnel utilisant les fonctionnalités de React
- Comment gérer l'état local, l'état partagé et l'état de l'application
- Comment utiliser les hooks intégrés, les hooks personnalisés et les hooks tiers
- Comment charger, mettre à jour et mettre en cache des données à l'aide de requêtes React
- Comment améliorer le chargement des pages et des données grâce au fractionnement du code et aux composants React Suspense

│ Public cible de ce livre │
Tout développeur ayant quelques connaissances en JavaScript et en développement web, et ayant appris les bases du développement React, peut lire ceci.
Ce livre vous aidera à mieux comprendre les hooks et à apprendre à écrire vos propres hooks personnalisés pour rendre vos programmes front-end plus modulaires.

│ Structure de ce livre │
La première partie présente la syntaxe et l'utilisation des hooks React intégrés à React.
Nous vous montrerons également comment créer vos propres hooks personnalisés et tirer le meilleur parti des hooks tiers fournis par d'autres bibliothèques React existantes.

La partie 2 explique comment charger plus efficacement le code des composants dans les applications plus volumineuses et comment utiliser le composant Suspense et les limites d'erreur pour configurer une interface utilisateur de secours pendant le chargement des ressources.
Ensuite, nous examinerons les API de concurrence que nous utilisons pour intégrer le chargement des données et Suspense, et gérer les transitions d'état.

[Note de l'auteur]

En tant que professeur de lycée et programmeur, j'ai eu le plaisir de développer des applications qui soutiennent l'enseignement, l'apprentissage et l'organisation au sein des établissements scolaires.
En étant à l'écoute des besoins des élèves, des enseignants et du personnel au quotidien, nous avons pu collaborer avec eux pour créer des applications et des outils intuitifs qui facilitent la planification, la communication, la compréhension et le jeu.
J'ai créé de tout, des applications de quiz et des jeux de différences écrits en JavaScript aux applications de planification de cours et de gestion des ressources utilisant jQuery et des modèles.
Depuis, le département des sciences de l'école souhaite un moyen de commander du matériel pour les cours, l'équipe de direction souhaite un moyen de communiquer les annonces au personnel et les techniciens en TIC souhaitent un moyen pour le personnel de signaler et de gérer les problèmes logiciels et matériels.
Qu’en est-il d’une application de gestion des places pour les élèves, d’un système de gestion de contenu (SGC) pour les actualités du site web de l’école, d’un calendrier personnalisé, d’une feuille de route interactive pour les heures de service ou d’un journal sportif ? Tous ces logiciels présentaient une apparence et une ergonomie cohérentes.


Bien que chaque projet ait ses propres exigences, il y avait beaucoup de points communs, et des méthodes similaires pouvaient être utilisées dans plusieurs applications.
Pour accélérer ce processus, je suis passé de JavaScript côté serveur à JavaScript côté client en utilisant Node.js, Express, Handlebars, Backbone et Marionette.
La plupart du temps, cela fonctionnait bien, mais il était parfois difficile de modifier l'application en fonction de l'évolution des besoins.
En particulier, le flux de données entre le modèle, la vue et le contrôleur n'était pas toujours fluide.
Les utilisateurs étaient satisfaits, mais je voyais les problèmes sous-jacents dans le code, et je savais qu'à un moment donné, je devrais revenir en arrière et démêler les nœuds.
Puis j'ai découvert React et tous mes problèmes ont été résolus ! Bien sûr, ce n'était pas une solution parfaite, mais le modèle de composants, de propriétés, d'état et de rendu automatique de React m'a davantage séduit que celui des autres bibliothèques.
J'ai converti une à une les applications existantes en React.
À chaque transformation, l'application devient plus simple, plus facile à comprendre et plus facile à maintenir.
J'ai pu réutiliser des composants communs, ce qui m'a permis de modifier rapidement le code et d'ajouter de nouvelles fonctionnalités en toute confiance.
Bien que je ne sois pas un fanatique de React (je respecte la diversité des frameworks), je suis définitivement un converti, et j'ai apprécié mon expérience en tant que développeur React et les retours des utilisateurs sur mes applications React.

L'utilisation de React Hooks a permis à mon code de franchir une nouvelle étape positive en termes de simplicité.
Le code auparavant dispersé dans les méthodes de cycle de vie des composants de classe peut désormais être regroupé dans des points d'extension personnalisés, à l'intérieur ou à l'extérieur des composants fonctionnels.
Vous pouvez facilement isoler, maintenir et partager le code de fonctions spécifiques, telles que la définition des titres de documents, l'accès au stockage local, la gestion des valeurs de contexte, la mesure de la taille des éléments à l'écran, l'abonnement à des services et la lecture de données.
Il est également devenu plus facile de connecter des fonctionnalités provenant de bibliothèques existantes telles que React Router, Redux, React Query et React Spring.
Les hooks React vous offrent une nouvelle façon d'appréhender les composants React.
Il y a quelques petits pièges à éviter au début, mais je pense que ce changement de mentalité est assurément une bonne chose.

Le passage aux hooks représente un changement fondamental dans le fonctionnement futur de React.
Le mode de concurrence (rendu concurrent dans React 18) deviendra la nouvelle norme, permettant une gestion du temps optimisée où le rendu ne bloque pas le thread principal et où les modifications d'état prioritaires, comme les entrées utilisateur, peuvent être rendues immédiatement pendant que d'autres composants sont en cours de construction.
L'hydratation sélective permettra à React de ne charger que le code du composant absolument nécessaire aux interactions avec l'utilisateur, et l'API Suspense permettra aux développeurs de spécifier plus précisément l'état de chargement lors du chargement du code et des ressources.

L'équipe React se concentre sur la création d'excellentes expériences de développement qui permettent aux développeurs de créer d'excellentes expériences utilisateur.
D'autres changements continueront d'intervenir et de meilleures pratiques continueront d'émerger.
J'espère que ce livre vous aidera à comprendre les changements actuels et à vous préparer aux changements de React qui se profilent progressivement à l'horizon.


[Note du traducteur]

Avec l'introduction des composants fonctionnels et des hooks dans React, diverses bibliothèques tierces ont commencé à fournir des hooks, et les utilisateurs se sont rendu compte que l'utilisation conjointe de hooks et de composants fonctionnels permettait de créer des applications beaucoup plus concises, composables et faciles à maintenir que les composants basés sur des classes. C'est pourquoi les hooks et les composants fonctionnels sont aujourd'hui largement utilisés.
Par exemple, Zustand et Jotai, qui sont des bibliothèques de gestion d'état React populaires actuellement, fournissent toutes deux des hooks.
Par conséquent, pour apprendre le développement React, il est nécessaire d'apprendre systématiquement à gérer les hooks.
Cependant, la plupart des ouvrages sur React traitent encore en détail des composants de classe, expliquent la gestion du cycle de vie des composants par le biais de méthodes de classe plutôt que de hooks, et expliquent souvent brièvement les hooks React.

Ce livre couvre en détail les différentes fonctionnalités de React, notamment les hooks.
Les développeurs ayant une certaine connaissance de JavaScript et du développement web, et ayant appris les bases du développement React, pourront mieux comprendre les hooks grâce à ce livre et écrire leurs propres hooks personnalisés afin de modulariser davantage les programmes front-end.

Avant tout, il fournit une explication visuelle détaillée du fonctionnement des composants fonctionnels React et de la manière de séparer chaque fonction d'un composant fonctionnel en hooks grâce à de riches illustrations, ce qui vous permet de comprendre plus facilement la relation entre les composants et les hooks, ainsi que la manière de séparer les fonctions communes des composants que vous avez écrits en hooks.
Et une fois que vous aurez bien compris le fonctionnement des hooks, vous pourrez plus facilement comprendre et utiliser le fonctionnement des composants et des hooks tiers lorsque vous utiliserez les hooks fournis par de nouvelles bibliothèques tierces.
Même pour les développeurs front-end peu familiers avec React, ce guide explique en détail, illustrations à l'appui, comment les différentes parties des composants de classe se transforment en composants fonctionnels et en hooks. Il détaille pas à pas les diverses fonctions nécessaires à la création d'une application web avec les composants fonctionnels React, comme la gestion de l'état des composants via le hook `useState`, le partage de l'état entre plusieurs composants grâce à `useReducer` et le partage de références avec le hook `useRef`. Il est également utile aux débutants en React souhaitant acquérir les bases du langage.
J'espère que ce livre sera utile aux programmeurs React qui utilisent les hooks.