Skip to content

[Suggestion]: clarify behaviour of ref callbacks #7811

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
OliverJAsh opened this issue May 13, 2025 · 1 comment
Open

[Suggestion]: clarify behaviour of ref callbacks #7811

OliverJAsh opened this issue May 13, 2025 · 1 comment

Comments

@OliverJAsh
Copy link
Contributor

OliverJAsh commented May 13, 2025

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

@rickhanlonii
Copy link
Member

Yeah this could be cleaned up, want to submit a PR to improve it? It should probably flip so it emphasizes the ref callback pattern and has a note about legacy support with passing null when there's no cleanup.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants