Série React : useState vs useRef

Lorsque vous débutez, useState et toutes ses bizarreries peuvent être assez écrasantes. Maintenant, ajoutez useRef au mix et vous obtenez une forte explosion cérébrale.

---

J'ai pensé qu'il serait utile d'approfondir un peu les aspects techniques de useRef vs useState, car les ingénieurs ont généralement du mal à comprendre les différences entre eux et quand choisir l'un plutôt que l'autre.

Voici mes définitions pour chacun, à grands traits et évidemment simplistes à l'extrême :

useState est un hook qui vous permet d'accéder et de mettre à jour une valeur, déclenchant un nouveau rendu.

useRef est un hook qui vous permet de référencer une valeur qui n'est pas nécessaire pour le rendu.

---

Vous vous demandez peut-être pourquoi est-il important de comprendre ce que chacun de ces éléments apporte à la table ? Eh bien, vous pourriez être tenté d'intégrer useState dans tout, simplement parce que cela fonctionne.

Oui, CEPENDANT, plus votre application devient complexe avec des composants passant les accessoires d'état 5 niveaux plus bas, déclenchant un tas de mises à jour inutiles en cours de route, vous allez probablement commencer à rencontrer des problèmes de performances plus tôt que vous ne l'imaginez.

Une autre idée fausse que beaucoup de développeurs ont est de penser que useRef ne peut manipuler et accéder qu'aux éléments DOM, ce qui est triste car vous manquez tous les 99 autres choses¹ useRef peut faire.

Commençons par useState ! Gardez vos oreilles ouvertes maintenant, mon cher développeur ʕ◉ᴥ◉ʔ

---

✨ useState

useState est un moyen puissant mais simple de mettre à jour la vue une fois que la valeur d'une variable change, il maintient la dernière valeur synchronisée avec l'écran sans effectuer manuellement aucune opération nous-mêmes. La syntaxe de déclaration ressemble à ceci const [memesILiked, setMemesILiked] = useState(9000).

Parlons maintenant de ce qui se passe sous le capot lorsque vous effectuez une opération avec useState.

La mise à jour d'une valeur d'état déclenche un nouveau rendu, et comme vous pouvez l'imaginer, le nouveau rendu de la vue est une opération TRÈS coûteuse à gérer pour le navigateur. Voici comment React et le navigateur fonctionnent conjointement pour garantir que votre application est mise à jour :

1. Event Trigger : Un événement déclenche une mise à jour de l'état. Un clic, une minuterie ou quoi que ce soit vraiment.
2. State Update : setState est appelé et planifie une mise à jour pour le composant, le composant est marqué comme "sale" (nécessitant un nouveau rendu).
3. Phase de réconciliation : React démarre la réconciliation entre le nouveau DOM virtuel et l'ancien DOM virtuel. Il restitue de manière récursive le composant et tous ses enfants.
4. Vérification des différences : React compare la nouvelle arborescence DOM virtuelle avec la précédente. Les modifications sont stockées dans une liste de mises à jour à appliquer au vrai DOM.
5. Phase de rendu : La méthode de rendu ou le composant de fonction est appelé avec le nouvel état.
6. Phase de validation : React applique les modifications du processus de comparaison au vrai DOM.
7. Mettre à jour le DOM : Le vrai DOM est mis à jour pour refléter le nouvel état. Le navigateur repeint le DOM, mettant à jour visuellement l'interface utilisateur.
8. Effets post-rendu : tous les effets qui devaient s'exécuter après le nouveau rendu du composant sont appelés. Cela inclut les hooks useEffect qui ont été enregistrés avec des dépendances qui ont changé pendant le rendu.

Ouf, cela fait beaucoup de choses... Bien que le processus ci-dessus garantisse que votre interface utilisateur reste synchronisée avec l'état de votre application, il met également en évidence pourquoi des rendus excessifs ou inutiles peuvent entraîner des problèmes de performances. . Heureusement, React propose plusieurs stratégies et outils pour aider à optimiser ce processus, comme useMemo et useCallback, mais cela dépasse le cadre de cet article !

En résumé, useState est un crochet assez pratique, et lorsqu'il est utilisé correctement, il peut offrir à l'utilisateur une expérience formidable. Prenez le changement de thème, par exemple. Avec useState, vous pouvez facilement basculer entre les modes clair et sombre, offrant à vos utilisateurs la gratification instantanée de voir l'application se transformer en fonction de leurs préférences.

---

✨ useRef

Maintenant, parlons de useRef. Alors que useState consiste à déclencher de nouveaux rendus lorsque l'état change, useRef est comme l'observateur silencieux qui ne veut jamais attirer l'attention sur lui-même. C'est parfait pour stocker des valeurs mutables qui ne nécessitent pas de nouveau rendu lorsqu'elles changent. La syntaxe ressemble à const memeRef = useRef(null).

useRef est le plus souvent utilisé pour accéder directement aux éléments DOM. Par exemple, si vous devez cibler un champ de saisie par programme, useRef peut contenir une référence à cet élément. Mais les capacités de useRef vont au-delà du simple accès au DOM. Il peut également stocker n'importe quelle valeur mutable ! Et c'est ici, mes amis, que la magie opère ??? (à mon avis en tout cas).

Pensez-y comme ceci : useRef est un moyen de conserver les valeurs à travers les rendus sans déclencher un nouveau rendu. Cela le rend parfait pour stocker des données telles que des minuteries, des compteurs ou même l'état précédent d'un composant. Contrairement à useState, la mise à jour d'une référence ne demande pas à React de restituer votre composant. Il met simplement à jour tranquillement la valeur et poursuit ses activités.

Voici un exemple pratique : disons que vous souhaitez implémenter un compteur simple, mais que vous ne voulez pas que l'interface utilisateur se mette à jour à chaque fois que vous incrémentez le compteur. Vous pouvez utiliser useRef pour stocker la valeur du compteur. Le compteur incrémenterait comme prévu, mais comme le composant ne se soucie pas de cette valeur de référence à des fins de rendu, aucun nouveau rendu ne se produirait.

useRef est également excellent pour préserver la dernière valeur d'un état sans provoquer de rendus supplémentaires. Par exemple, si vous utilisez un intervalle pour mettre à jour une valeur, mais que vous ne souhaitez pas que cette valeur déclenche un nouveau rendu toutes les millisecondes, useRef est votre outil de prédilection. Il permet à la valeur de changer en arrière-plan, gardant votre interface utilisateur réactive et évitant les nouveaux rendus inutiles.

En résumé, useRef est mieux utilisé pour :

• Accès aux éléments DOM : cas d'utilisation classique, comme focaliser un champ de saisie.
• Stockage de valeurs mutables : qui ne nécessitent pas de nouveau rendu, comme les minuteries ou les valeurs précédentes.
• Conserver les valeurs à travers les rendus : sans provoquer de nouveau rendu, gardez votre interface utilisateur fluide et efficace.

---

Maintenant que vous ESPOIR comprenez la différence (si j'ai fait mon devoir correctement²), plongeons-nous dans quelques cas d'utilisation pas si courants. Je vais me concentrer un peu plus sur useRef car j'ai l'impression que c'est le héros méconnu ici.

1. Suivi de l'état de montage des composants : useRef peut être utilisé pour savoir si un composant est monté ou démonté, cela peut être utile pour éviter les mises à jour d'état après le démontage.

2. Conserver les valeurs statiques : pour stocker des valeurs statiques qui ne changent pas entre les rendus, comme une constante ou une valeur mise en cache, useRef est plus efficace que useState.

3. Empêcher la réinitialisation : Si vous souhaitez empêcher un morceau de code de réexécuter chaque rendu (par exemple, l'initialisation d'une connexion WebSocket).

4. Stockage des rappels précédents : Si vous devez conserver une référence à une fonction de rappel précédente, useRef peut stocker la référence de fonction précédente sans affecter le cycle de rendu du composant.

5. Référencement des ID de minuterie : lorsque vous travaillez avec des minuteries (comme setTimeout ou setInterval), stockez l'ID de minuterie dans un useRef pour éviter de déclencher un nouveau rendu à chaque fois que la minuterie est définie ou effacée.

6. Déclenchement d'animations : Pour déclencher impérativement des animations (comme une transition CSS ou une animation de défilement), useRef peut être utilisé pour interagir directement avec les éléments DOM sans provoquer de nouveaux rendus.

---

✨ Conclusion

Bien que useState soit crucial pour gérer et réagir aux changements d'état qui devraient déclencher de nouveaux rendus, useRef est le partenaire silencieux qui vous aide à gérer l'état sans perturber l'interface utilisateur.

Savoir quand utiliser chacun peut vous éviter des problèmes de performances potentiels et rendre vos applications React plus efficaces et plus maintenables !

---

Merci d'avoir lu, si vous êtes arrivé ici, PAWS UP AND HIGH FIVE ! ⊹⋛⋋( ՞ਊ ՞)⋌⋚⊹

---

Notes de bas de page :
¹ Évidemment une exagération.
² Je suis un peu dramatique, au cas où vous ne pourriez pas le savoir.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!