Repository navigation
Clarify ref callback cleanup behavior in common ref docs - #8579
Conversation
|
Requesting review for this wording clarification. This updates the Happy to refine wording further if maintainers prefer a different phrasing. |
Size changesDetails📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 This PR introduced no changes to the JavaScript bundle! 🙌 |
| When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call the cleanup function returned from your 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. | ||
| 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, React calls the previous callback's cleanup function (if provided). If no cleanup function is returned, React calls the previous callback with `null`. Then React calls the next callback with the DOM node. |
There was a problem hiding this comment.
Could we preserve the existing wording and emphasis while clarifying the cleanup behavior?
| 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, React calls the previous callback's cleanup function (if provided). If no cleanup function is returned, React calls the previous callback with `null`. Then React calls the next callback with the DOM node. | |
| 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 cleanup function returned by the *previous* function will be called, and the *next* function will be called with the DOM node. If no cleanup function is returned, the *previous* function will be called with `null` as the argument instead. |
| [See an example of using the `ref` callback.](/learn/manipulating-the-dom-with-refs#how-to-manage-a-list-of-refs-using-a-ref-callback) | ||
|
|
||
| When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call your the cleanup function returned from the callback. | ||
| When the `<div>` DOM node is added to the screen, React will call your `ref` callback with the DOM `node` as the argument. When that `<div>` DOM node is removed, React will call the cleanup function returned from your callback. |
There was a problem hiding this comment.
Also here try to preserve whats already written as it doesnt seem important for the intended clarification, meaning keeping "the callback"
|
Thanks for the review, @aurorascharff! I've addressed both suggestions in commit 4928162: preserved the existing wording and emphasis while clarifying the cleanup behavior, and kept "the callback" in the preceding paragraph. Could you please take another look when you have a chance? |
Fixes #7811
Summary
refcallback behavior when callbacks change between rendersnullto the old callback is legacy fallback behavior when no cleanup is returnedWhy
Issue #7811 points out ambiguity in the current wording, especially around when React calls a previous callback with
null. This change aligns wording with current React 19 cleanup semantics while preserving backwards-compatibility notes.Validation
yarn lintyarn lint-heading-ids