J'ai fais une erreur lors de la démonstration pour faire enlever le useEffect lors de l'update de value. Effectivement les states ne seront pas à jour lorsque tu clique dessus. Voici une codesandbox avec une solution plus complète : codesandbox.io/s/dontuseuseeffect-v8iz5j
Merci ça tombe au poil, cette semaine j'ai galéré avec un useEffect dans lequel j'essayais de gérer des souscriptions d'observables et dans mon esprit j'étais persuadé que la cleanup function n'était jouée que sur le unmount. Du coup ça flinguait tout mon traitement et je comprend pourquoi maintenant :D
Du coup utiliser un useEffect sans tableau de dépendances revient a mettre une fonction qui s'execute directement dans le composant (puisque cela sera exécuté à chaque rendu ?).
C'est pas faux mais ça ne revient pas à la même chose, plutôt à une chose similaire. Quand tu ne mets pas de tableau de dépendance, tu exécutes la callback après le rendu et le paint
J'ai besoin d'aide à ce sujet car je bosse actuellement sur un vrai projet où deux states doivent être mis automatiquement à jour lorsqu'il y a un changement fait par un utilisateur quelconque. Je pense à un state global. Mais bon qu'en penses tu Melvynx et puis-je avoir ton discord 😏
Hello, si tu as besoin de ce genre de state je pense que y'a un problème. Si tu as deux states "syncroniser" c'est que tu n'en veux qu'un. Soit tu monde le state soit tu fais un state global oui !
J'me suis pété les dents hier sur l'utilisation du fetch dans une useEffect, j'ai """réussit""" a régler le problème de récupération de mes données avec des ? (ex: data?.title) , ce hook me donne des cauchemars. J'ai pas tout compris même avec ta vidéo mais j'ai compris le principe du cleanup !
Très intéressant, merci beaucoup, cette idée de "synchronisation" est plus intuitif que ce que l'on dit habituellement: "les effets de bords". Petite question : Le useEffect ce relance si une des valeurs dans le tableau de dépendance change, ok. Mais, y a-t-il une différence entre, ne pas passer ce 2nd argument, et passer un array vide ? Ou est-ce strictement pareil ?
Hello, oui si il n'y a aucun tableau de dépendances l'effet sera run à chaque render. CF : Le moment de la vidéo ou je suis dans un codesandbox, on voit bien la différence !
Très bonne vidéo explicative ! Merci de partager tes connaissances, néanmoins tu n’abordes pas la partie fetch sans useEffect. Tu parles seulement de Suspense peut on avoir la solution sans cela ? Merci
Hello, c'est tellement complexe le fetch ahah ! Les alternatives sont des lib comme use-query et use-swr. Sinon, tu peux utiliser remix et next. Mais c'est un très très gros poisson ce sujet ! Presque 1 vidéo pour chaque façon de faire... et ça change constamment !
Présentation sympa, mais c'est dommage que tu n'approfondie pas plus le cleanup sur le "fetch as you render" avec une approche native de fetch La solution un peu crappy que tu présente avec une clé "canceled" qui permet d'éviter les memory leaks peut être amélioré en utilisant l'API native JS `AbortController` qui permet d'éviter les races conditions et d'avoir quelque chose de plus propre.
Le but de la vidéo est de comprendre l'utilisation du useEffect et pas des exemples de chaque use case. Si j'ai utilisé canceled = true c'est car c'est plus simple pour les personnes qui regarde de le comprendre
@@melvynxdev je le comprends et tu explique vraiment bien c’est super, mais ça aurait été quand même intéressant de mentionner qu’il y a une façon plus élégante de cleaner notre subscription
Super la vidéo par contre à 9:16 comment ça se fait que l'on ne tombe pas dans une condition infini puisque on modifie removingValue les conditions ne nous protège pas à ce niveau
Je suuuur kiffe ton cerveau Melvyn ;))). L'approche visuelle et "c'est ki ki fait koua" dans mon code illustré de ptits shémas en parallele ça fait quoi => dans mon app. C'est juste un life saver ! Please hold on & continue ! et ... thank you bien sur ;))
J'ai fais une erreur lors de la démonstration pour faire enlever le useEffect lors de l'update de value.
Effectivement les states ne seront pas à jour lorsque tu clique dessus.
Voici une codesandbox avec une solution plus complète : codesandbox.io/s/dontuseuseeffect-v8iz5j
Merci ça tombe au poil, cette semaine j'ai galéré avec un useEffect dans lequel j'essayais de gérer des souscriptions d'observables et dans mon esprit j'étais persuadé que la cleanup function n'était jouée que sur le unmount. Du coup ça flinguait tout mon traitement et je comprend pourquoi maintenant :D
Cool, heureux de t'avoir aidé !
Du coup utiliser un useEffect sans tableau de dépendances revient a mettre une fonction qui s'execute directement dans le composant (puisque cela sera exécuté à chaque rendu ?).
C'est pas faux mais ça ne revient pas à la même chose, plutôt à une chose similaire. Quand tu ne mets pas de tableau de dépendance, tu exécutes la callback après le rendu et le paint
Merci pour la vidéo.
Mais honnêtement je n'ai pas encore compris useEffect .
J'ai besoin d'aide à ce sujet car je bosse actuellement sur un vrai projet où deux states doivent être mis automatiquement à jour lorsqu'il y a un changement fait par un utilisateur quelconque. Je pense à un state global. Mais bon qu'en penses tu Melvynx et puis-je avoir ton discord 😏
Hello, si tu as besoin de ce genre de state je pense que y'a un problème. Si tu as deux states "syncroniser" c'est que tu n'en veux qu'un. Soit tu monde le state soit tu fais un state global oui !
J'me suis pété les dents hier sur l'utilisation du fetch dans une useEffect, j'ai """réussit""" a régler le problème de récupération de mes données avec des ? (ex: data?.title) , ce hook me donne des cauchemars. J'ai pas tout compris même avec ta vidéo mais j'ai compris le principe du cleanup !
ahah je comprends, désolé que ma vidéo n'ai pas aidé d'avantages !
slt très bien expliquer je voudrais savoir si ton site codelynx à été faite avec react
Oui !
Hello tu parles d'une conférence sur le useEffect tu as le lien ?
Hello, tu peux la retrouver ici : ruclips.net/video/HPoC-k7Rxwo/видео.html
Très intéressant, merci beaucoup, cette idée de "synchronisation" est plus intuitif que ce que l'on dit habituellement: "les effets de bords".
Petite question :
Le useEffect ce relance si une des valeurs dans le tableau de dépendance change, ok. Mais, y a-t-il une différence entre, ne pas passer ce 2nd argument, et passer un array vide ? Ou est-ce strictement pareil ?
Hello, oui si il n'y a aucun tableau de dépendances l'effet sera run à chaque render.
CF : Le moment de la vidéo ou je suis dans un codesandbox, on voit bien la différence !
@@melvynxdev 3:57 Ah oui effectivement merci, je viens de revoir cette partie, j'ai compris !
Très bonne vidéo explicative ! Merci de partager tes connaissances, néanmoins tu n’abordes pas la partie fetch sans useEffect. Tu parles seulement de Suspense peut on avoir la solution sans cela ?
Merci
Hello, c'est tellement complexe le fetch ahah !
Les alternatives sont des lib comme use-query et use-swr.
Sinon, tu peux utiliser remix et next.
Mais c'est un très très gros poisson ce sujet !
Presque 1 vidéo pour chaque façon de faire... et ça change constamment !
Présentation sympa, mais c'est dommage que tu n'approfondie pas plus le cleanup sur le "fetch as you render" avec une approche native de fetch
La solution un peu crappy que tu présente avec une clé "canceled" qui permet d'éviter les memory leaks peut être amélioré en utilisant l'API native JS `AbortController` qui permet d'éviter les races conditions et d'avoir quelque chose de plus propre.
Le but de la vidéo est de comprendre l'utilisation du useEffect et pas des exemples de chaque use case. Si j'ai utilisé canceled = true c'est car c'est plus simple pour les personnes qui regarde de le comprendre
@@melvynxdev je le comprends et tu explique vraiment bien c’est super, mais ça aurait été quand même intéressant de mentionner qu’il y a une façon plus élégante de cleaner notre subscription
Super la vidéo par contre à 9:16 comment ça se fait que l'on ne tombe pas dans une condition infini puisque on modifie removingValue les conditions ne nous protège pas à ce niveau
j'ai pas tester le code
Hey Melvynx. Super vidéo. J'aimerais savoir quel logiciel tu utilises pour la presentation de ces schemas? :D
Hello merci beaucoup, c'est tldraw !
@@melvynxdev Super. Merci beaucoup. Très bon boulot. 👌
Je suuuur kiffe ton cerveau Melvyn ;))). L'approche visuelle et "c'est ki ki fait koua" dans mon code illustré de ptits shémas en parallele ça fait quoi => dans mon app. C'est juste un life saver ! Please hold on & continue ! et ... thank you bien sur ;))
merci beaucoup !
🥵
moi j'ai compris xD
ouf...