reactjs / reactjs/react.dev

Third Rule of Hooks: "Side effects may only be caused in useEffect and event handlers"

Offen
#3,560 5 Kommentare 1 Reaktion 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

Vorherrschende Sprache
JavaScript
Sterne
11.8k
Forks
7.9k
Ø Merge
1 T. 11 Std.
Gemergte PRs (30 T.)
11

Beschreibung

I'd like to propose a third rule of hooks.

In the section "Advanced Guides > Strict Mode" it states that

Because the above methods might be called more than once, it’s important that they do not contain side-effects. Ignoring this rule can lead to a variety of problems, including memory leaks and invalid application state.

If I'm not mistaken, the inverse of this statement is that side effects based on a certain state of states shall be triggered in a useEffect, and that side effects from user interaction shall be triggered directly in the event handler. Everything else shall be side effect free. I think that adding this to the "rules of hooks" section makes it easier to remember and gives it much more visibility. I think the "variety of problems" will especially grow when concurrent mode is introduced. By having a "checklist" that can be used during code reviews etc. makes it easier to avoid this kind of problems.

Also one could maybe repeat the "Do not mutate state" rule there, cause this is still a very common problem and having it multiple times in the docs does no harm in my eyes.

What do you think?

Beitragsleitfaden

Beitragsleitfaden öffnen

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit dem verlinkten Strict Mode-Leitfaden und dem Abschnitt Rules of Hooks. Vergleiche die vorgeschlagenen Hinweise zu Seiteneffekten und die Regel zu wiederholten Zustandsmutationen mit der bestehenden Dokumentation; abgeschlossen ist die Aufgabe, wenn Wortlaut und Platzierung abgestimmt sind und die relevanten Dokumente aktualisiert wurden.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
5/5
Geschätzter Aufwand
Über eine Woche
Aktivitätsstatus
Veraltet
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
25/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.