Skip to content

Commit b51108e

Browse files
Add information about ref handling in strict mode (#6777)
* Add information about DOM ref handling in strict mode * switch order of ref object / ref callback in strictmode doc * use 'refs to components' terminology instead of 'DOM refs' * update references to canary/r19 * Expand usage example and remove badges --------- Co-authored-by: Rick Hanlon <[email protected]>
1 parent cd0c683 commit b51108e

File tree

3 files changed

+452
-1
lines changed

3 files changed

+452
-1
lines changed

src/content/learn/manipulating-the-dom-with-refs.md

+8
Original file line numberDiff line numberDiff line change
@@ -341,6 +341,14 @@ In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a
341341

342342
This lets you read individual DOM nodes from the Map later.
343343

344+
<Note>
345+
346+
When Strict Mode is enabled, ref callbacks will run twice in development.
347+
348+
Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs.
349+
350+
</Note>
351+
344352
</DeepDive>
345353

346354
## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}

src/content/reference/react-dom/components/common.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -280,7 +280,7 @@ To support backwards compatibility, if a cleanup function is not returned from t
280280
#### Caveats {/*caveats*/}
281281

282282
* When Strict Mode is on, React will **run one extra development-only setup+cleanup cycle** before the first real setup. This is a stress-test that ensures that your cleanup logic "mirrors" your setup logic and that it stops or undoes whatever the setup is doing. If this causes a problem, implement the cleanup function.
283-
* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If not cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
283+
* When you pass a *different* `ref` callback, React will call the *previous* callback's cleanup function if provided. If no cleanup function is defined, the `ref` callback will be called with `null` as the argument. The *next* function will be called with the DOM node.
284284

285285
---
286286

0 commit comments

Comments
 (0)