reactjs / reactjs/react.dev

[Mistake]: set-state-in-effect gives a wrong example of bad usage

Offen
#8,411 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

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

Beschreibung

Summary

https://github.com/reactjs/react.dev/blob/abe931a8cb3aee3e8b15ef7e187214789164162a/src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md?plain=1#L70-L91

Page

https://react.dev/reference/eslint-plugin-react-hooks/lints/set-state-in-render

Details
I want to sync state to a prop {/clamp-state-to-prop/}

A common problem is trying to "fix" state after it renders. Suppose you want to keep a counter from exceeding a max prop:

// ❌ Wrong: clamps during render
function Counter({max}) {
  const [count, setCount] = useState(0);

  if (count > max) {
    setCount(max);
  }

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

As soon as count exceeds max, an infinite loop is triggered.

I think this Counter component can be rendered and clicked without issues.
The claim that an infinite loop will be triggered is incorrect.

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

Lies src/content/reference/eslint-plugin-react-hooks/lints/set-state-in-render.md, insbesondere die verlinkten Zeilen 70–91 und den Abschnitt „I want to sync state to a prop“. Prüfe das Counter-Beispiel und seine Aussage anhand des im issue beschriebenen Verhaltens; abgeschlossen ist die Aufgabe, wenn Beispiel und Erklärung den gemeldeten Fall korrekt beschreiben.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
javascript, react
Bereich
documentation
Issue-Typ
Dokumentation
Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Aktivitätsstatus
Ruhig
Klarheit
Klar beschrieben
Anfängerfreundlichkeit
55/100

Neue Issues direkt in Ihr Postfach

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