Effets ou rendu, dépendances et nettoyage

Objectif : Savoir ce qui s’exécute pendant le rendu (de manière pure, sans effets de bord) et ce qui relève des effets (la synchronisation avec le monde extérieur).

• Rendu : renvoyer l’interface
• Effet : s’exécuter après l’affichage
• Nettoyage : annuler le travail effectué

Les dépendances contrôlent le moment où un effet s’exécute :

• [] : s’exécuter une fois après le montage
• [x] : s’exécuter au montage et chaque fois que x change
• Omettre les dépendances : s’exécuter après chaque rendu (à éviter pour les débutants)

Un effet avec [count] met à jour le titre chaque fois que le compteur change. Comparez-le à [], qui ne s’exécute qu’une seule fois.

Ajoutez un nettoyage en renvoyant une fonction depuis l’effet. React l’exécute avant de relancer l’effet et lors du démontage.

• Supprimer les écouteurs
• Effacer les minuteurs
• Annuler les requêtes

Nous attachons un écouteur de redimensionnement dans un effet et le supprimons lors du nettoyage pour éviter les fuites.

Pièges :

• Effectuer des effets de bord pendant le rendu : déplacez-les dans useEffect.
• Oublier des dépendances, ce qui entraîne des valeurs obsolètes.
• Oublier le nettoyage des écouteurs et des minuteurs.

Récapitulatif : Le rendu reste pur ; les effets s’exécutent après l’affichage. Utilisez des tableaux de dépendances pour contrôler leur exécution et renvoyez un nettoyage pour vous désabonner ou effacer les minuteurs.