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 Image
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 Image
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 Image
* 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 Image
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 Image
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 Image
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-rerend…
🎸 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

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Melvyn • Développeur

Melvyn • Développeur Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @melvynxdev

Jun 10
Travailler c'est bien 💪

Mais, le montrer c'est encore mieux 💃

ça te motive, ça motive les autres, ça te rend fière et te détermine à continuer

Voici 5 sites qui te permettront de partager ton travail rapidement ❤️

#RT ❤️

🧵 #thread #deploy #devops #share Image
1. Vercel - vercel.com

C'est le premier car c'est une follie !

✅ Deploy automagiquement React, Angular et Vue
✅ Très facile d'ajouter un nom de domaine custom
✅ Interface canon
✅ Gratuit avec infinité de projet
✅ Puissance de Next
❌ Que frontend
❌ Pas libre
2. Heroku - dashboard.heroku.com

✅ Deploy automatiquement Front et Backend (React, Rails, Django...)
✅ Liberté du serveur, CLI bash
✅ DB disponibe
❌ Interface moins sexy
❌ Très rapidement payant (les limites sont vite atteintes)
Read 7 tweets
Jun 8
Je vois beaucoup de personnes se demande : « c’est quand le moment pour chercher un emploi ? » 🤔
C’est déjà le moment d’en chercher un ✅

Arrêter de remettre à plus tard 😬 !

Passe à l’action aujourd’hui 💪

Après ce Thread tu seras motivé comme jamais 😤

#rt ❤️

🧵#thread Image
Déjà, il faut savoir que la technique c’est bien. Excellent. Mais, c'est 50% du travail de développeur, le mindset c’est l’autre partie !

Tu as bien lu. Pas besoin d’être une machine de guerre en dev si tu as le bon mindset 😶

C’est pour ça que je vais en parler sur ce compte👍 Image
Tu te demandes peut-être : « c’est quand que je suis prêt pour travailler en entreprise ? »
Ma réponse est que si tu te poses cette question, c’est que le bon moment c’est maintenant, sur le champ 🏃 !

Mais, des personnes me diront « j’ai peur », « je n'ai pas confiance en moi »
Read 14 tweets
Jun 7
Rendu conditionnel en React, le piège à éviter ⚠️

Il y a 3 méthodes pour faire du rendu conditionnel :
1. condition && "yes"
2. condition ? "yes" : null
3. if (condition) return "yes"

Je vais t'éviter des bugs avec la méthode 2 💪 !

Je t'explique ⬇️

#rt ❤️

🧵 #react #js #jsx Image
La méthode 2 est en réalité un raccourci pour :

condition ? "yes" : condition

Par conséquent, quand la condition est falsy, c'est le résultat de celle-ci qui sera rendue !
developer.mozilla.org/en-US/docs/Glo…
Voici les valeurs falsy :
- 0 / -0
- ""
- NaN
- null / undefined

Avec 0 et NaN, React affiche ses valeurs !
0 && "yes" → 0

Pour le visualiser, j'ai créé un petit site :
dzdg5y.csb.app

Tu as une surprise avec 0 et la méthode 2
La valeur est affichée !! Image
Read 11 tweets
Jun 5
📚 React = Next.JS ⚛️

Beaucoup de dev apprennent à faire du React et pense que Next.JS est compliqué a appréhendé.

Ils pensent qu'ils l'apprendront plus tard etc...

Je t'explique quand l'apprendre et pourquoi tu dois l'utiliser

#rt ❤️

🧵 #thread #react #nextjs
Au départ tu dois apprendre React. Tu peux utiliser vite vitejs.dev/guide/#scaffol… en créant un projet simple React one page

Une fois que tu as compris les hooks, les components, les states etc... ➡️ Go sur Next.js

Voici le tuto simple nextjs.org/learn/basics/c… Image
Pour ton portfolio, ton premier site web avec de la navigation etc... utilise Next.js
C'est la norme dans beaucoup d'entreprises ->

Et, ça va rendre ton premier site vraiment plus cool
Read 8 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Don't want to be a Premium member but still want to support us?

Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal

Or Donate anonymously using crypto!

Ethereum

0xfe58350B80634f60Fa6Dc149a72b4DFbc17D341E copy

Bitcoin

3ATGMxNzCUFzxpMCHL5sWSt4DVtS8UqXpi copy

Thank you for your support!

Follow Us on Twitter!

:(