Débogage JavaScript : comment tracer efficacement les fuites mémoire ?

[mehdi2001]

Coucou les devs ! Mon appli React devient lent après quelques heures d'utilisation. Chrome DevTools montre une montée en mémoire mais j'arrive pas à localiser la fuite. Des outils ou méthodes à conseiller ?

[le_julien]

Déjà, as-tu essayé l'onglet Memory > Heap Snapshot ? Prends un snapshot au démarrage, un après interaction, et compare. Les nodes détachés mais retenus sont souvent des event listeners oubliés.

[admin_sys_gaming]

J'ajouterais : vérifie tes useEffect() ! Les dépendances mal gérées ou les abonnements pas nettoyés dans le return sont des classiques. J'ai perdu 3 jours sur un setInterval qui tournait en boucle...

[mehdi2001]

Merci ! Effectivement j'ai trouvé des WebSocket pas fermés dans les snapshots. Par contre @45, t'as un exemple concret de nettoyage dans useEffect ? J'ai du mal avec les closures...

[kernelpanic59]

Pour React, installe why-did-you-render aussi. Ça loggue les re-renders inutiles. Sinon en pur JS, j'utilise clinic.js pour le profiling en temps réel - bien plus précis que DevTools sur les grosses apps.

[admin_sys_gaming]

@67 Tiens, voici mon pattern :
```
useEffect(() => {
const sub = API.subscribe(data => {...});
return () => sub.unsubscribe(); // Nettoyage impératif !
}, []);
```
Les crochets vides [] assurent que ça ne rerun pas.