Les 15 Erreurs useState & useEffect que TOUS les Débutants Font en React

[@smithjohn2367]

16eme erreur ne pas gérer ses inputs comme pour l'erreur 4. Tu met un name à ton input et rien d'autre, on passe ne passe pas la clé et la value à la fonction en parametre.... tu geres ton changement avec l'event plutot, genre comme ça. const handleUpdate = (event: ChangeEvent) = > { const { name, value } = event.target const updatedProduct = { ... product } updatedProduct[name] = value setProduct(updatedProduct) }

[@melvynxdev]

Yes j’imagine

[@morgannavel4552]

10:11 les objets sont passés par référence (addrese) alors que les types primitifs (number, string ect ...) sont passés par valeur. Quand tu fais { id:"1"} tu demande à javascript de crée un nouvel object en terme informatique on alloue un emplacement mémoire. Dans le cas du "==" ça regarde si l'addrese mémoire est la même, dans notre cas c'est un nouvel emplacement mémoire donc il répond toujours "false".

[@melvynxdev]

exacte

[@lansolo1991]

Hello, pour l’erreur 1, je ne capte pas en quoi utiliser un useEffect avec une dependance sur une state est un mauvais pattern pour trigger un event (2:24) ? Tu ne donnes pas ton alternative. J’utilise ce pattern pour listen et trigger des events, perso…

[@melvynxdev]

Oui je montre ma solution. useEffect est fait pour SYNHRNOISER nos composants avec d'autre chose. Ici j'utilise le pattern "d'action" qui est bien plus react-friendly. kzbin.info/www/bejne/mHjdkqGcgLt5m7c

[@lansolo1991]

@@melvynxdevmerci, vidéo très intéressante, faut que je m'approprie ces schémas mentaux qui m'échappent encore un peu 😓

[@duruticodeur]

Salut, t'as une coquille dans ton titre, y a pas de s à font 😉

[@KyZoHD1]

Dans l'erreur 8 le composant fait 2 rendus à cause du StrictMode (actif seulement en développement)

[@melvynxdev]

Yes exacte

[@matthieudantes4129]

merci pour la vidéo, tu peux parler du strict mode dans la prochaine stp

[@melvynxdev]

ah oui c'est vrai

[@SlowedOutOfExistence]

pour l'utilisation d'un seul objet au-lieu de plusieurs useState, c'est bien pour des formulaires. pour d'autres cas ou il y aurait trop de useState, useReducer est une bonne alternative.

[@melvynxdev]

oui, après moi je conseil un bon react-hook-form

[@joannybernardeau8691]

Merci de cette vidéo, cela démontre qu'il y a encore du boulot.

[@melvynxdev]

ahaha merci et keep pushing

[@asis8781]

Bravo, le SWR et les custom hooks sont limite obligatoires 😉

[@melvynxdev]

oui !

[@SlowedOutOfExistence]

pour modifier seulement certains champs d'un objet puis mettre a jour son state, vous pouvez faire: setUser(prev => { return {...prev, name: "Jean"} }) ou setUser({...user, name: "Jean"})

[@melvynxdev]

oui

[@LeMontreuillois]

Salut Melvyn. Pour l'erreur 13, tu parles de la gestion du edge case et du happy path ?

[@melvynxdev]

bah je crois pas malheureusement

[@jordhanpoillot3491]

Sur l'erreur 14 dans le useState, plutôt que de mettre une arrow function on ne peut pas juste retirer les parenthèse de fin et juste nommer la fonction ?

[@melvynxdev]

non non c'est mieux de mettre une arrow function comme ça

[@amh1243]

Pour l'erreur5 , le useEffect n'est pas utile car le composant ne dispose que des 2 states utilisées mais si le composant contenait d'autres states, cela aurait plus de sens car cela éviterait de refaire le calcul de fullName à chaque modification d'une autre state? Je pense notamment à des propriétés dérivées d'une autre state et utilisant sort ou filter

[@melvynxdev]

Non, le useEffect n'est VRAIMENT pas fait pour ça du tout et il n'y a aucun cas ou c'est utile. Au pire tu voudrais utiliser le useMemo mais l'optimisation dans mon cas est trop minimum pour rendre le useMemo utiles, même avec 45 states.

[@aulo525]

Hello, pour l'erreur n°1, useCallback n'est pas adapté ?

[@melvynxdev]

Non, useCallback n'est vraiment pas utiles dans ce cas.

[@joantsyn7578]

Super astuces, thanks.👍

[@melvynxdev]

Merci bcp

[@gappalchemist]

Reacrquery(transtack query) c'est très bien aussi pour faire des requêtes à la place swr

[@melvynxdev]

Oui totalement, juste un peu plus compliqué pour la demo car je dois utiliser le queryClient

[@meschack04]

Hi Melvyn Quel est le thème de couleur que tu utilises pour ton éditeur ?

[@melvynxdev]

Hello, GitHub dark

[@deveta7079]

hello, swr est-il aussi vraiment utile sur next ? dans le cadre où on a des pages en SSR quoi ...

[@melvynxdev]

Moi j’utilise à tjr react query dans mes app Next

[@deveta7079]

@@melvynxdev En effet un pote m'a dit pareil donc je vais vous suivre et comme ça on sera au moins 3

[@stephenranaud9420]

T'es un bon mec

[@melvynxdev]

Toi aussi

[@bricelyonelnguetsop7129]

Hello, stp à l'erreur 5 (8:15) je n'ai pas compris pourquoi on a 4 Render lorsque tu dis "à cause du stric mode". C'est quoi ce mode?

[@melvynxdev]

Le StrictMode est le mode de développement en React pour détecter les erreurs

[@bricelyonelnguetsop7129]

Merci. Concernant l'erreur 12 je n'ai pas compris pourquoi le removeEventListner n'est plus appelé 😅

[@jordhanpoillot3491]

Je n'ai pas totalement compris non plus pourquoi on arrête d'avoir les event listener. Je comprend qu'il fallait aller chercher la valeur de counter, alors que maintenant on dit juste valeur précédente. Mais je ne vois pas pourquoi ca permet de ne plus appeler

[@melvynxdev]

Si tu return au début de la function « rien » le useEffect ne vas pas appeler la « cleanup » function car il ne la retourne pas

[@bricelyonelnguetsop7129]

Merci@@melvynxdev. Voici ce que j'ai compris: Sans le counter en dépendance, le use effect est appelé une seule fois. Ainsi le addEventListner écoute en permance l'événement onMouseMove tant que la vue n'est pas détruite. Je comprend aussi que le useEffect conserve toujours la valeur initiale de counter, c'est pourquoi il est recommandé d'utiliser la prevValue lorsqu'on veut accéder à la dernière valeur modifiée counter.

[@henochangemichaellonzokoff6036]

Est ce qu'on peut avoir une video sur les test en React

[@melvynxdev]

J’en ai déjà !

[@henochangemichaellonzokoff6036]

@@melvynxdev est ce que je peux avoir le lien

[@melvynxdev]

Cherche et trouve