Les formulaires en React 📈

•

Les formulaires en React ⚛️ Quand j'ai débuté React je faisais tous mes formulaires avec des states ❌ Voici comment les faire pour être le plus optimisé 📈 Quand on fait des forms en React on a deux choix 🔺controlled 🔺uncontrolled Lequel choisir ? #RT 👇 #thread

🔺 Controlled 🔺 Voici comment je faisais mes formulaires quand j’ai débuté React:

C’est très basique. J’ai un formulaire et à chaque fois que je change un caractère, j’update un State. Quand je clique sur le bouton j’appelle le `onSubmit` ce qui va lancer mon alerte avec les valeurs de mes states 😥

On peut voir qu’il y a quand même beaucoup de code pour pas grand chose : • les events handler (handleNameChange, onSubmit x2) • les states (useState x2) • les events (onChange, onClick)

Pour un formulaire uniquement !? 😮 Maintenant regardons coté performance 📈 (Ce formulaire est très petit, les perfs on s’en tape. Mais on imagine le même avec des librairies et 20 champs, ce n'est pas la même chose 🤔) Chaque caractère = 1 render

En écrivant mon nom / email, j’ai eu 19 rerender. Mais, rien n’a changé. Oui, la valeur du formulaire a changé, mais pour ça il n’y a pas besoin de React c'est gérer avec le dom nativement Un render permait de mettre à jour la vue ou déclencher du code, ici rien n’a été changé

C’est pourquoi il y a un moyen plus optimisé de faire pareil 🔺 uncontrolled🔺 Dans mon second exemple, je n’utilise plus de State. Il y a un formulaire avec la balise `onSubmit`. Dans le formulaire, il y a des inputs Les valeurs sont récupérées basiquement avec le dom

Voici le nombre de rerender qui se produisent ! (aucun sauf le premier quand l'app s'ouvre) Et, le résultat est totalement similaire ! Voici la CodeSandBox utiliser : codesandbox.io/s/web-form-type-render-ihop0h?file=/src/FormWithForm.jsx:119-126

Il n'y a pas besoin de states sauf pour une barre de recherche ou autre Et là, tu vas me dire "oui mais tu t'en rends compte on ne peut pas faire de data validation" Tu as raison, et on va voir les solutions ensemble !

Enfaite, je ne vais pas te proposer qu'une solution 🔺 react-hook-form. : react-hook-form.com/ Juste une des meilleures library pour tes formulaires ! Il gère la validation, il est opti et simple à utiliser !

Pour les arguments contre Formik tu peux les trouver ici : blog.logrocket.com/react-hook-form-vs-formik-comparison/

Voici le même exemple refactor avec le hook presenté ! Évidemment avec une ligne on ne voit pas trop l'avantage mais quand il s'agira d'ajouter des validations et autre le bénéfice se fera rapidement voir !

Ce sujet me tient à cœur car j'ai fait longtemps l'erreur 😢 et les forms c'est la base du web ❤️ Follow @melvynxdev pour ne rien rater ❤️ Dernier Thread : twitter.com/melvynxdev/status/1539645420485242881 PS : don't use Formik