Skip to content

Commit

Permalink
use 'refs to components' terminology instead of 'DOM refs'
Browse files Browse the repository at this point in the history
  • Loading branch information
noahlemen committed May 2, 2024
1 parent 71ec6cb commit 48573b0
Showing 1 changed file with 7 additions and 7 deletions.
14 changes: 7 additions & 7 deletions src/content/reference/react/StrictMode.md
Expand Up @@ -44,7 +44,7 @@ Strict Mode enables the following development-only behaviors:

- Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering.
- Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup.
- <CanaryBadge title="This feature is only available in the Canary channel" /> Your components will [detach and re-attach DOM refs](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) to find bugs caused by missing DOM ref cleanup.
- <CanaryBadge title="This feature is only available in the Canary channel" /> Your components will [detach and re-attach refs to components](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) to find bugs caused by missing ref cleanup.
- Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode)

#### Props {/*props*/}
Expand Down Expand Up @@ -88,7 +88,7 @@ Strict Mode enables the following checks in development:

- Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering.
- Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup.
- <CanaryBadge title="This feature is only available in the Canary channel" /> Your components will [detach and re-attach DOM refs](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) to find bugs caused by missing DOM ref cleanup.
- <CanaryBadge title="This feature is only available in the Canary channel" /> Your components will [detach and re-attach refs to components](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) to find bugs caused by missing ref cleanup.
- Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode)

**All of these checks are development-only and do not impact the production build.**
Expand Down Expand Up @@ -827,16 +827,16 @@ Without Strict Mode, it was easy to miss that your Effect needed cleanup. By run
[Read more about implementing Effect cleanup.](/learn/synchronizing-with-effects#how-to-handle-the-effect-firing-twice-in-development)
---
### Fixing bugs found by detaching and re-attaching DOM refs in development {/*fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development*/}
### Fixing bugs found by detaching and re-attaching refs to components in development {/*fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development*/}
<Canary>
In canary and experimental channels, React will run an extra setup+cleanup cycle in development for DOM refs, much like it does for Effects.
In canary and experimental channels, React will run an extra setup+cleanup cycle in development for refs to components, much like it does for Effects.
React will detach DOM refs that were created via `useRef` by setting `ref.current` to `null` before setting it back to the DOM node.
React will detach refs to components that were created via `useRef` by setting `ref.current` to `null` before setting it to the DOM node or handle.
For [`ref` callbacks](/reference/react-dom/components/common#ref-callback), React will call the callback function with the DOM node as its argument. It will then call the callback's [cleanup function](reference/react-dom/components/common#returns) before calling the `ref` callback function again with the DOM node as its argument.
For [`ref` callbacks](/reference/react-dom/components/common#ref-callback), React will call the callback function with the DOM node or handle as its argument. It will then call the callback's [cleanup function](reference/react-dom/components/common#returns) before calling the `ref` callback function again with the DOM node as its argument.
You can read more about DOM refs in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
You can read more about refs in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs)
</Canary>
---
Expand Down

0 comments on commit 48573b0

Please sign in to comment.