reactjs / reactjs/react.dev

[Suggestion]: clarify behaviour of ref callbacks

Offen Anfängerfreundlich
#7,811 2 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

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

Beschreibung

Summary

The described behaviour for ref callbacks with null as an argument is ambiguous.

Page

https://react.dev/reference/react-dom/components/common#ref-callback

Details

From https://react.dev/reference/react-dom/components/common#ref-callback:

React will also call your ref callback whenever you pass a different ref callback. In the above example, (node) => { ... } is a different function on every render. When your component re-renders, the previous function will be called with null as the argument, and the next function will be called with the DOM node.

If I understand correctly, the emphasised sentenced is not correct when the ref callback returns a clean up function, as is the case in the referenced example. This needs to be clarified.

There is a note later on which helps a bit, but I still think this sentence could be made clearer so it makes sense in isolation.

Reduced test case to confirm this behaviour: https://stackblitz.com/edit/vitejs-vite-2r9rn6m2?file=src%2FApp.tsx&terminal=dev

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 Abschnitt ref-callback auf der verlinkten react.dev-Seite und prüfe den reduzierten StackBlitz-Testfall, um das beschriebene Verhalten zu verifizieren. Präzisiere den hervorgehobenen Satz so, dass er weiterhin korrekt ist, wenn der Callback eine Cleanup-Funktion zurückgibt, und stelle sicher, dass die Formulierung ohne Rückgriff auf den späteren Hinweis verständlich ist.

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
Größtenteils klar
Anfängerfreundlichkeit
72/100

Neue Issues direkt in Ihr Postfach

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