React ⚛️ - useRef, la face cachée du hooks 🔒 !

•

React ⚛️ - useRef, la face cachée du hooks 🔒 ! Tu le connais déjà surement 🤔 Tu as l'habitude de l'utiliser pour récupérer la référence d'un élément du DOM en JavaScript 🚀 Mais, en vrai, il a bien plus d'utilité ! #RT ❤️ 🧵 #thread #react #js #web

Déjà c'est quoi useRef 🤔 ? C'est une valeur sauvegardée dans un objet, dans ton composant qui persiste lorsque le composant se rerender Quand elle est update, le composant ne se rerender pas Son nom vient du fait que la valeur est sauvegardée dans un objet : { current: ... }

Son usage basique est pour récupérer la référence d'un élément HTML primitif, par exemple, une div : Cet usage permet notamment : * changer les propriétés d'une div * récupérer la valeur d'un input * gérer le canvas

Mais, c'est loin d'être le seul usage, on va aborder 3 usages ensemble : 1. garder des états qui ne changent pas les vues 2. garder des références d'objet comme setTimeout ou setInterval 3. Connaître le nombre de fois qu'un composant est rerender

1. Garder des états qui ne changent pas les vues Pour un projet : holydraw.vercel.app/draw (go tester) J'ai créé un petit canvas pour dessiner Dans un hooks, j'ai besoin * du point courant, pour dessiner le trait * d'un tableau qui sauvegarde chaque "ligne" avec la couleur etc

* ainsi que l'historique des lignes supprimé pour gérer le undo / redo J'utilise donc le hooks useRef Pourquoi ? Je n'ai pas envie de render mon composant quand je modifie les valeurs J'ai envie que les valeurs persistent entre les render Je ne veux pas stocker en global

2. garder des références d'objet comme setTimeout Exemple : Ce hooks permet d'appeler le callback après que le onDebouce n'est pas été appelé pendant 30 secondes depuis son dernier appel Par exemple dans un search bar, pour faire une call api quand la personne arrête d'écrire

Ici j'ai besoin de stocker le setTimeout pour le clear et au cas où le hooks est destroy Ce serait une erreur de le mettre dans un useState ! Car je ne veux pas rerendre ma vue car je change le handler Je souhaite juste faire un call API, le useRef est donc parfaite pour ça !

3. Connaître le nombre de fois qu'un composant est rerender Quand tu mets ce hooks dans ton composant, il va retourner une ref qui s'incrémente à chaque render, et donc compte les render. J'utilise parfois pour debugger certaines choses Le useRef est obligatoire pour faire ça

Un state est impossible ici, car si tu update un state dans un useEffect ça va créer une boucle infinie J'ai fait un petit CodeSandBox pour que vous puissiez tester le hooks par vous-même ! codesandbox.io/s/count-rerender-useref-u1xyv5?file=/src/useRenderCount.js:49-235

🎸 En conclusion 🎸 * Si tu n'as pas besoin de rerender ton composant quand une valeur change → useRef * Si ton composant affiche ou agit avec un useEffect → useState

Je te remercie d'avoir lu 🚀 Follow @melvynxdev ❤️ Dernier Thread : twitter.com/melvynxdev/status/1534570462822354944?s=20&t=qVfhQKf4jzpgjhERuYw76g