Debug React et race conditions
Une collection pratique sur le cleanup, les effets asynchrones obsoletes et la lecture rigoureuse de snippets React suspects.
L experience learn complete vit dans le workspace : signaux de cours, checkpoints, practice ciblee et renvoi en review.
Apercu de la collection
Tu peux inspecter ici la sequence et la couverture des sujets. La boucle guidee complete reste dans le workspace dashboard.
Il faut utiliser useLayoutEffect quand l'effet doit lire ou ajuster le layout de maniere synchrone avant que l'utilisateur voie le resultat peint.
En comportement de production normal, l'effet tourne une fois apres le premier commit de cette instance de composant, puis son cleanup s'execute quand cette instance est demontée.
Le bug est une race condition: l'ancienne requete peut finir apres la nouvelle et quand meme appeler setUser. Il faut une logique de cleanup ou d'annulation pour empecher une reponse obsolete de mettre a jour le state.
Le bug est que le cleanup du timeout est retourne depuis le helper async au lieu d'etre retourne par l'effet lui-meme, donc React ne l'execute jamais comme vrai cleanup.