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

Cours GRATUIT sur useState + useEffect : codelynx.dev/beginreact/cours...
▶ VIDÉO
Les erreurs avec useState et useEffect en React peuvent vraiment te ralentir, surtout si tu débutes. Dans cette vidéo, on plonge directement dans les erreurs courantes que la plupart des développeurs font quand ils utilisent ces deux hooks. Je te montre comment éviter des bugs frustrants et comment optimiser ton code pour des applications plus propres et plus efficaces. T'en as marre des surprises dans ton code React ? Cette vidéo est faite pour toi.
▶ ME SUIVRE
🐦 Mon Twitter : / melvynxdev
🖥 Mon GitHub : github.com/Melvynx
📑 Mon Blog : codelynx.dev
💬 Mon Discord communautaire : codelynx.dev/discord
Le club du développeur secret codelynx.dev/club
Cours GRATUIT sur useState : codelynx.dev/beginreact/usestate
Cours GRATUIT sur NextJS : codelynx.dev/nextreact/nextjs
Cours GRATUIT sur JavaScript : codelynx.dev/beginjavascript/...
▶ TIMECODES
00:00 - Introduction
00:13 - Erreur 1
02:25 - Erreur 2
03:56 - Erreur 3
05:57 - Erreur 4
07:46 - Erreur 5
09:02 - Erreur 6
11:03 - Erreur 7
13:21 - Erreur 8
15:35 - Erreur 9
17:29 - Erreur 10
19:17 - Erreur 11
21:53 - Erreur 12
23:56 - Erreur 13
25:31 - Erreur 14
27:37 - Erreur 15
30:03 - Outro
#javascript #developper #react #reactjs #reactjstutorial #reactjsdeveloper #reactjscourse #reactjsforbeginners #reactjsproject #javascripttutorials #javascripttutorialforbeginners

[@joannybernardeau8691]

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

[@melvynxdev]

ahaha merci et keep pushing

[@matthieudantes4129]

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

[@melvynxdev]

ah oui c'est vrai

[@joantsyn7578]

Super astuces, thanks.👍

[@melvynxdev]

Merci bcp

[@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

[@stephenranaud9420]

T'es un bon mec

[@melvynxdev]

Toi aussi

[@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

[@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

[@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

[@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

[@meschack04]

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

[@melvynxdev]

Hello, GitHub dark

[@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

[@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

[@duruticodeur]

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

[@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.

[@asis8781]

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

[@melvynxdev]

oui !

[@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. th-cam.com/video/bGzanfKVFeU/w-d-xo.html

[@lansolo1991]

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

[@KyZoHD1]

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

[@melvynxdev]

Yes exacte

[@aulo525]

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

[@melvynxdev]

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

[@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