Thread by @melvynxdev

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

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 !!

Avec NaN aussi !

Pour les deux autres méthodes, il n'y a aucun souci.

La méthode 2 n'est pas à bannir, elle est à utiliser avec extrême précaution !

Voici quand tu peux utiliser la méthode 2 :

✅ quand tu formes la condition comme booléen avec ===
✅ quand tu utilises TypeScript avec des props "utilitaires"
❌ quand l'information vient d'une API

Suite ⬇️

❌ quand tu utilises une props pas typée ou qui vient d'une api
❌ quand la valeur est un nombre

À mon avis, le mieux est d'utiliser toujours la variant 1 pour éviter tous les bugs !

Voici un petit exemple, ça ne coûte pas grand-chose et ça pourra t'éviter 2-3 bug !

Follow @melvynx.dev ❤️ !

Nouveau Thread chaque jour !

Tu peux check le dernier Thread :

https://twitter.com/melvynxdev/status/1533793537187229696?s=20&t=S3cAROnQKrrE1OveQsCrYA

@melvynx Ce #Thread fait suite aux

https://twitter.com/melvynxdev/status/1534147907036798976?s=20&t=S3cAROnQKrrE1OveQsCrYA

33 % vont peut-être avoir des bugs 💪

En d'autre termes :

https://twitter.com/code_thi/status/1534203660120498177?s=20&t=oOA2_VH2WLmfyHBRZ2T9uw

Ou solution des nerds :

!!condition && "yes"

Boolean(condition) && "yes"