euZebe commented 4 years ago

La demande a été formulée sur Slack d'un retour d'expérience sur les hooks, au-delà des bêtes compteurs et todo apps, sur des applis significatives.

Entre projets from scratch écrits exclusivement avec des hooks, projets où les hooks se mélangent aux classes, et migration progressive, nous avons probablement des choses à présenter : avantages, inconvénients, points de vigilance, difficultés ou facilités pour se les approprier, trucs et astuces...

Dans un premier temps, il me semble opportun de présenter le fonctionnement des hooks, après quoi plusieurs personnes pourraient intervenir sur des formats courts (ou pas, comme chacun le sent) pour partager leur expérience et leurs conseils sur le sujet.

NB: Il serait chouette de faire cette prez courant novembre.

euZebe commented 4 years ago

en guise d'introduction, voici ce que j'avais en tête:

Introduction aux Hooks

règles fondamentales

hooks en début de fonction hooks non conditionnés (pas de if(...) { useEffect(...);} par exemple)

mise en pratique

cycle de vie

implem d'un composant React basique sous forme de fonction
volonté d'ajouter un state + contrôler le cycle de vie => avant les hooks: transformation en classe (rappel sur le cycle de vie)
how-to avec les hooks

factoriser un comportement

avant les hooks: render prop ou HOC
how-to avec les hooks

tips

différents types de hooks ? Faut-il balayer tous ou les principaux hooks ?
custom hooks
plugin eslint (en parler ? pas forcément, c'est de base dans CRA)
possibilité de mixer hooks et classes
useState vs this.setState (qui est plutôt un mergeState, techniquement)
Bonne pratique: séparation des states avec les hooks

euZebe commented 4 years ago

Il pourrait être chouette que quelqu'un parle des tests auto sur les hooks.

Il pourrait être chouette que quelqu'un parle de TypeScript (ultra-simple avec les hooks)

Quelqu'un pourrait aussi prendre un petit quart d'heure pour refaire la démo de Ryan Florence (premier quart d'heure de la vidéo), consistant en l'implémentation naïve des hooks ; j'ai trouvé que ça aidait pas mal à démystifier le truc.

ylastapis commented 4 years ago

J'y voit aussi: Cas d'usage des hooks avec Redux. Cas d'usage des hooks dans des formulaires complexes. Factorisation de code réutilisable avec custom hooks et par exemple le fetch de données --> deuxième partie de la prez que tu mentionnais

antoinerousseau commented 4 years ago

Donc comme je disais je veux bien intervenir quelques minutes si besoin en vrac, voici les trucs que j’aimerais raconter :

une petite note sur le côté lisibilité discutable des hooks pour les débutants (moi j’adore les hooks mais faut bien admettre que componentDidMount est plus parlant qu’un useEffect avec un tableau vide), et surtout sur le fait qu’il faut pas forcément associer chaque ancienne méthode à un hook (penser useEffect différemment de didMount/etc, penser “effet” et ses dépendances, etc)
retour d’xp (ranger ses hooks dans des hooks, les pièges, etc)
parmi les pièges, j’aimerais parler des conséquences des closures sur la valeur retournée par un useState dans un event listener lui même défini dans un useEffect mais dont le callback est définit à l'extérieur : la valeur étant “stale” (pas à jour)
peut être faire une mini intro de hooks externes populaires (useLocation, useStaticQuery, etc)
typescript

myagoo commented 4 years ago

Je voudrais parler de tips & gotchas autour des hooks useState avec fonction d'init, useState qui ne supporte pas le second argument callback comme dans setState useMemo qu'il ne faut utiliser QUE comme optim de perf les useCase autour de useRef Pourquoi encore utiliser createRef Faire des démos de composition de hooks

myagoo commented 4 years ago

Je voudrais parler de rules-of-hooks, pourquoi c'est bien, pourquoi il faut faire attention quand on l'introduit dans une codebase, pourquoi il faut pas toujours prendre pour argent comptant ce qu'il dit

myagoo commented 4 years ago

Aussi : https://lukaszmakuch.pl/post/react-hooks-oops-part-3-an-effect-does-not-run-again-when-its-dependencies-change/

MoOx commented 4 years ago

Euh là en gros il fait de l'écoute sur un champs sans "listener" (pas de onChange) et il voudrait que ça marche? Wtf un peu ce post

myagoo commented 4 years ago

oui, il utilise son compo en mode non controlé. Je sais bien que tu n'es pas la cible de ce post, mais il faut comprendre que des gens croient vraiment que les hooks sont magiques

MoOx commented 4 years ago

Non mais là c'est remettre en cause les bases de React... En mode non contrôlé justement tu décides explicitement quand tu lis la valeur, et là... Enfin peut etre comme tu dis que les gens "imaginent" des choses non explicite (mais bon clairement si RTFM on devrait pas s'imaginer ce genre de choses)

mabhub commented 4 years ago

Pour éviter cette confusion, une possibilité est de comparer ce paramètre de useEffect à une clé de mémoïsation… Ou peut-être juste de rappeler que c'est une condition, et non un déclencheur de l'effet.

myagoo commented 4 years ago

Non mais là c'est remettre en cause les bases de React... En mode non contrôlé justement tu décides explicitement quand tu lis la valeur, et là... Enfin peut etre comme tu dis que les gens "imaginent" des choses non explicite (mais bon clairement si RTFM on devrait pas s'imaginer ce genre de choses)

Je trouve son post légitime => la dépendance à changé, les newbies des hooks peuvent croire que cette dépendance est watchée dans les coulisses et que leur effect sera déclenché

ylastapis commented 4 years ago

Donc pour résumer

Présenter les bases ~30min ? => Zelia
Connected Component (redux) => Typescript + FC + hooks ~15min => Nous. On peut déborder sur quand utiliser ou ne pas utiliser Redux avec useContext & co.
Tester efficacement les composants ~15min => ?
Demo Ryan Florence - lisibilité des hooks ? ~15min => @euZebe
composition custom hooks + organisation ~15min => ?
Tips, Gotchas, Best practices, pièges à éviter (stale state), custom hooks populaires ~15min => ?
useState avancé, useEffect avancé, useRef, createRef, useMemo => ?
rules-of-hooks / lint

Hadrien voulait pas présenter un truc également ?

MoOx commented 4 years ago

La Demo à la Ryan Florence, je pense que @euZebe aurait voulu là faire.

Moi pour les tests je peux pas aider, je teste plus depuis que je fais du reasonml (enfin que du fonctionnel, donc on teste pas bas niveau, type test unitaire) - mais je dirais que si tu fais du tests à la simulation de click, ça devrait rien changer en pratique (et si ça change vos tests, je dirais que les tests sont pas bien fait :/ Si jamais je peux toucher un mot sur le côté testing (pour redire ça mais en plus explicite peut etre?) Pour redux je pense que ca pourrait être en exemple, peut être plus à la fin si il reste du temps. Si on a bcp de petite partie avec plusieurs intervenants, on risque de bien déraper :D

@hadrienl tu voulais prendre un sujet?

euZebe commented 4 years ago

Effectivement je veux bien m'occuper de l'implémentation naïve des hooks. et c'est Zélia qui devrait s'occuper de l'introduction.

antoinerousseau commented 4 years ago

Heu et du coup moi rien ? :/

MoOx commented 4 years ago

Je sais pas trop d'ou @ylastapis sort son programme :D @ylastapis t'as fait ca comment?

@antoinerousseau Dans tous les cas on peut faire des LT 5 min retour d'xp de qui qui veut à la fin selon le temps restant/fatigue etc

euZebe commented 4 years ago

En effet, @antoinerousseau tu présentes ce que tu avais évoqué plus haut. On cale tout ça le 13, pour éviter les redondances.

ylastapis commented 4 years ago

@antoinerousseau my bad, j'ai zappé ton comment plus haut, désolé. @MoOx oui j'essaie de synthétiser, qu'on bosse pas tous sur la même chose :)

real34 commented 4 years ago

Si vous me dites ce que vous attendez pour les tests sur les hooks, je veux bien préparer des exemples pour faire 15 min sur le sujet.

Vous ne craignez pas que cela fasse trop d'orateurs ?

euZebe commented 4 years ago

Sur les tests, je suis de l'avis de @MoOx, qui a été discuté sur Slack il y a quelques semaines : des tests de composant ne devraient pas être différents selon l'implémentation.

Oui ça va faire beaucoup d'orateurs, mais l'idée des lighting talks me semble intéressante. On expérimente.

Et si tu as quelque chose qu'il te semble pertinent de présenter néanmoins, @real34, tu peux préparer un truc de 10-15 minutes max. Mais personnellement je ne vois pas de point particulier à évoquer concernant les tests.

real34 commented 4 years ago

En effet, rien de particulier lié aux hooks. Pas plus que pour les HOC à la belle époque quoi, ou autre depuis.

Ça m'arrange d'arriver les mains dans les poches sans avoir de présentation à faire :-)

antoinerousseau commented 4 years ago

Le plan : https://docs.google.com/document/d/1j5oieM_DgB4fyn7S47QMDW12WaOUDahyL5-KR4R8cqQ/edit

MoOx commented 4 years ago

Ton lien n'est pas public

antoinerousseau commented 4 years ago

Sorry, il faut demander l'accès à @ylastapis (ou sinon je l'enlève de l'issue)

ylastapis commented 4 years ago

done

MoOx commented 4 years ago

Les archives sont ici https://react-toulouse.js.org/meetup/6/

MoOx / react-toulouse

React hooks - retours d'expérience #14

Introduction aux Hooks

règles fondamentales

mise en pratique

cycle de vie

factoriser un comportement

tips