React useEffect-Verbot

Was macht React useEffect-Verbot?

Direktes useEffect ist eine Notluke für externe Synchronisation. Es lebt in einem überprüften, domänenspezifischen Hook für ein echtes externes System; Komponenten bleiben effektfrei.

Umfang

Das Ersetzen von Effekten verändert das betroffene Verhalten. Die repositoriumsweite Durchsetzung von Lint-Regeln ist eine separate Aufgabe: Wende sie nur an, wenn sie angefordert oder durch eine bestehende Repository-Richtlinie erforderlich ist. Eine Überprüfungsanfrage erzeugt Ergebnisse; eine Implementierungsanfrage autorisiert Ersetzungen im Umfang und eine Verifizierung ohne weiteren Genehmigungsschritt.

Arbeitsablauf

1. Finde direkte Importe, React.useEffect(...)-Namespace-Aufrufe und Wrapper um useEffect in der betroffenen Oberfläche.

2. Klassifiziere jeden Effekt und ersetze ihn in dieser Präferenzreihenfolge:

   1. Berechnung zur Renderzeit
   2. Server-, Loader- oder Framework-Daten-API
   3. der Server-Status-Layer des Repositoriums (z. B. eine TanStack Query queryOptions-Fabrik mit Variablen im Schlüssel und dem durchgereichten signal)
   4. Event-Handler, Aktion oder Mutation
   5. keyed component boundary
   6. useSyncExternalStore
   7. überprüfter domänenspezifischer Hook für ein echtes externes System

   Wenn nichts zutrifft, formuliere den externen Synchronisationsvertrag, bevor du einen Effekt behältst. Ersetzungen behandelt die nicht offensichtlichen Fälle.

3. Bewahre das Framework, die Datenlogik, die Lint-Struktur und die Abhängigkeitspolitik des Repositoriums. Füge eine Bibliothek nur hinzu, wenn die Anfrage oder die Repository- Richtlinie dies autorisiert; ohne einen Server-Status-Layer betrachte den verbleibenden Effekt als Designlücke.

4. Führe Lint-, Typ- und Testprüfungen sowie die kleinste reale UI- oder Hook-Überprüfung für das geänderte Verhalten durch.

Legitime Effekte

Setze jeden legitimen Effekt in einen Hook, der nach seinem externen System benannt ist (z. B. eine Chat-Verbindung, ein Map-SDK, ein Widget), in einer eigenen Datei. Der Hook besitzt Setup und Cleanup, nimmt seine reaktiven Eingaben als Parameter entgegen und listet jeden Wert auf, den Setup oder Cleanup liest, sodass react-hooks/exhaustive-deps ohne Unterdrückung besteht. Bevorzuge einen vorhandenen Repository-Hook.

Der Hook ist auf ein externes System spezialisiert. Ein generischer Wrapper, der einen Callback und ein vom Aufrufer bereitgestelltes Abhängigkeitsarray akzeptiert (useUpdateEffect(fn, deps), useMountEffect(fn)), ist ein direkter Effekt unter einem anderen Namen; Server-Status, Prop-Kopien, Benutzeraktionen und keyed Resets haben jeweils einen eigenen Ersatz weiter oben.

Durchsetzung

Wenn die Durchsetzung im Umfang liegt, erweitere den vorhandenen Linter des Repositoriums, sodass er sowohl benannte useEffect-Importe als auch React.useEffect(...)-Aufrufe ablehnt. Erlaube nur die benannten, überprüften Integrations-Hook-Dateien, nicht etwa ein Verzeichnis wie src/hooks/**; melde generische Wrapper und deren Aufrufer als zu migrierende Verstöße. Führe dieselbe Lint-Oberfläche im kanonischen lokalen Gate und in CI mit fixierten Tool-Versionen aus.

Bei der Überprüfung ist jeder neue direkte Effekt ein Befund, es sei denn, die Änderung dokumentiert und belegt eine legitime externe Systemgrenze. Fordere einen Ersatz an, nicht die Optimierung des Abhängigkeitsarrays.

Abgrenzungen

• Beschränke Migrationen auf die betroffene oder angeforderte Oberfläche.
• Lasse useLayoutEffect, useInsertionEffect, Framework-Lifecycle-APIs und Nicht-React- Effektsysteme unberührt, auch in Lint-Regeln, sofern nicht angefordert.
• Wende Performance-Primitiven nur für gemessenes Verhalten oder ein etabliertes Repository-Muster an.
• Upstream-Zuschreibung: upstream.