Hooks ReactExplained

24 of 24 rows

Hook↕	Ce qu'il fait↕	Utilisez-le pour↕
État
⤢useState	Conserve une valeur unique qui déclenche un re-rendu quand elle change.	État local d'un composant : champs de formulaire, interrupteurs, compteurs.
⤢useReducer	Conserve un état piloté par un reducer d'actions, comme un petit store.	État avec plusieurs champs liés ou transitions complexes.
⤢useRef	Conserve une valeur mutable qui ne déclenche PAS de re-rendu.	Conteneurs mutables, minuteurs et accès direct au DOM via .current.
Effets
⤢useEffect	Exécute un effet de bord après le rendu, avec un nettoyage optionnel.	Récupérer des données, gérer des abonnements et se synchroniser avec un système externe.
⤢Effect cleanup	La fonction renvoyée par un effet s'exécute avant l'effet suivant, puis à nouveau au démontage.	Démonter des abonnements et des minuteurs, ou annuler une requête en cours.
⤢useLayoutEffect	Comme useEffect, mais s'exécute de façon synchrone après la mutation du DOM.	Lire ou écrire la mise en page avant que le navigateur ne peigne (toasts, tooltips).
⤢useEffect vs handlers	Les gestionnaires d'événements s'exécutent en réponse à une action utilisateur ; les effets s'exécutent après le rendu pour se synchroniser.	La logique causée par l'utilisateur va dans un gestionnaire, la logique causée par le rendu dans un effet.
⤢StrictMode	En développement, monte les composants deux fois pour que les effets s'exécutent, se nettoient puis s'exécutent à nouveau.	Détecter les doubles abonnements et les nettoyages manquants avant la production.
Performance
⤢useMemo	Met en cache une valeur calculée jusqu'à ce que ses dépendances changent.	Éviter les recalculs coûteux entre les rendus ; changez volontairement une valeur des deps pour invalider le cache.
⤢useCallback	Met en cache une référence de fonction jusqu'à ce que ses dépendances changent.	Callbacks stables passés à des enfants mémoïsés ou utilisés comme dépendances.
⤢React.memo	Ignore le re-rendu d'un composant dont les props sont inchangées.	Composants enfants lourds ; passez une fonction de comparaison en deuxième argument quand l'égalité superficielle ne suffit pas (un HOC, pas un hook).
Contexte et références externes
⤢useContext	Lit une valeur de contexte sans prop drilling.	Thème, locale ou utilisateur authentifié partagé dans toute l'arborescence.
⤢useImperativeHandle	Personnalise l'instance que le parent voit à travers une ref.	Exposer une API resserrée depuis un enfant via forwardRef.
Concurrence et autres
⤢useTransition	Marque une mise à jour d'état comme non urgente pour que l'UI reste réactive.	Garder une saisie fluide pendant qu'une liste lourde se re-rend.
⤢useDeferredValue	Diffère une valeur pour que les mises à jour puissent être interrompues.	Débouncer des rendus coûteux sans minuteurs.
⤢useId	Génère un id unique et stable pour les attributs d'accessibilité.	Relier label et input entre les rendus serveur et client.
⤢use()	Lit une promesse ou un contexte pendant le rendu ; le seul hook que l'on peut appeler conditionnellement.	Déballer une promesse avec Suspense, ou lire un contexte dans un retour anticipé.
⤢useActionState	Conserve un état piloté par une action de formulaire, avec un indicateur pending inclus.	Soumissions de formulaire qui renvoient des erreurs ou un état à afficher en ligne.
⤢useOptimistic	Affiche immédiatement une valeur optimiste, puis retombe sur l'état réel quand l'action se termine.	Afficher un like ou un message envoyé pendant que sa requête serveur est en cours.
⤢useFormStatus	Lit l'état pending du <form> englobant, sans props.	Un bouton d'envoi qui se désactive pendant que son formulaire parent se soumet.
⤢useSyncExternalStore	S'abonne à un store extérieur à React et lit un instantané cohérent.	API navigateur comme le statut en ligne, ou stores d'état tiers.
⤢useInsertionEffect	S'exécute avant les effets de mise en page, conçu pour injecter des règles CSS-in-JS.	Bibliothèques de styles qui doivent insérer leurs règles avant la lecture de la mise en page.
⤢useDebugValue	Affiche une étiquette personnalisée pour l'état interne d'un hook dans React DevTools.	Étiqueter ce qu'un hook personnalisé contient pendant le débogage.
⤢Custom hooks (use*)	Votre propre hook qui compose les hooks intégrés pour partager de la logique.	Comportements avec état réutilisables comme useFetch ou useMediaQuery.