React Closure-Lecks Kommen Häufig Von Langlebigen Callbacks_

Closures sind kein React-Geruch. Sie sind normales JavaScript. Sie werden erst dann zu einem Speicherproblem, wenn ein anderes System einen Callback am Leben erhält, nachdem die Komponente, die ihn erstellt hat, hätte verschwinden sollen.

Deshalb kehren dieselben Fehler in verschiedenen Formen immer wieder zurück:

• Ereignislistener
• Intervalle
• Abonnements
• Beobachter

Eine Typische Leckform

Das Problem sieht normalerweise so aus:

useEffect(() => {
  function onResize() {
    setWidth(window.innerWidth);
  }
 
  window.addEventListener("resize", onResize);
}, []);

Wenn der Listener niemals entfernt wird, kann der Callback Referenzen auf den Zustand der Komponente und Aktualisierungsfunktionen länger als beabsichtigt halten. Ein Leck mag klein sein. Wiederholte Navigation durch denselben Bildschirm kann es zu einem stetigen Anstieg des Speicherverbrauchs führen.

Das korrekte Muster hält Registrierung und Bereinigung zusammen:

useEffect(() => {
  function onResize() {
    setWidth(window.innerWidth);
  }
 
  window.addEventListener("resize", onResize);
  return () => window.removeEventListener("resize", onResize);
}, []);

Was In Realen Apps Zu Prüfen Ist

Wenn der Speicher nach Routenwechseln oder langen Sitzungen wächst, beginnen Sie mit langlebigen Callbacks, die den Zustand der Komponente erfassen. Die Frage ist einfach: Wer hält diese Closure noch?

Diese Untersuchung führt normalerweise zu:

• Browser-Listener
• Bibliotheksabonnements
• Nicht geschlossene Beobachter
• Benutzerdefinierte Ereignisbusse

Bessere Ingenieurregel

Jedes Mal, wenn ein Effekt einen Callback außerhalb von React registriert, schreiben Sie den Bereinigungsweg im selben Effekt, bevor Sie fortfahren. Diese Gewohnheit verhindert mehr Lecks als jede spätere Profilsitzung.

Weiterführende Literatur

• React useEffect
• Chrome DevTools Speicher-Debugging