Repository navigation
Conversation
Author
|
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. |
Collaborator
There was a problem hiding this comment.
Could we preserve the existing wording and emphasis while clarifying the cleanup behavior?
Suggested change
| 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. |
Collaborator
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"
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
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