[Suggestion]: clarify behaviour of ref callbacks
Nobody has claimed this yet.
Assessment
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Newbie friendliness
- 72/100
- Issue type
- Documentation
- Clarity
- Mostly clear
- Activity status
- Quiet
- Tech stack
- javascript, react
- Domain
- documentation
Research direction
Start with the ref-callback section at the linked react.dev page and review the reduced StackBlitz test case to verify the behavior described. Clarify the highlighted sentence so it remains accurate when the callback returns a cleanup function, and ensure the wording makes sense without relying on the later note.
Written by the indexing model from the issue text.
Description
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
- Dominant language
- JavaScript
- Stars
- 11.8k
- Forks
- 7.9k
- Avg merge
- 16h 6m
- Merged PRs (30d)
- 7
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
More from reactjs/react.dev
-
type: documentation
Difficulty 2/5 1-3 hours Newbie friendliness 72/100
-
Difficulty 1/5 Under an hour Newbie friendliness 82/100
-
bug: unconfirmed
Difficulty 2/5 1-3 hours Newbie friendliness 74/100
-
type: typos
Difficulty 1/5 Under an hour Newbie friendliness 90/100
-
bug: unconfirmed
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
All issues in reactjs/react.dev
Similar issues
-
ai-observability bug team/ai-observability
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
-
Difficulty 2/5 1-3 hours Newbie friendliness 68/100
AllTheMods/ATM-10-L#19 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 78/100
SignalK/n2k-signalk#345 ·
-
Difficulty 2/5 1-3 hours Newbie friendliness 84/100
-
Difficulty 1/5 1-3 hours Newbie friendliness 88/100
JuliaPluto/PlutoPlotly.jl#72 ·