Skip to content

Commit f930da4

Browse files
committed
Expand usage example and remove badges
1 parent 9f412ca commit f930da4

File tree

3 files changed

+453
-10
lines changed

3 files changed

+453
-10
lines changed

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -343,7 +343,9 @@ This lets you read individual DOM nodes from the Map later.
343343

344344
<Note>
345345

346-
When [Strict Mode](/reference/react/StrictMode) is on in React 19, [React detaches and re-attaches DOM refs](/reference/react/StrictMode#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development). This will stress-test callbacks like the one above by calling its cleanup function before calling the callback a second time.
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.
347349

348350
</Note>
349351

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1200,3 +1200,15 @@ input { margin-left: 10px; }
12001200
```
12011201
12021202
</Sandpack>
1203+
1204+
---
1205+
1206+
## Troubleshooting {/*troubleshooting*/}
1207+
1208+
### My callback ref runs twice when the component mounts {/*my-callback-ref-runs-twice-when-the-component-mounts*/}
1209+
1210+
When Strict Mode is on, in development, React runs setup and cleanup one extra time before the actual setup.
1211+
1212+
This is a stress-test that verifies your ref callback logic is implemented correctly. If this causes visible issues, your cleanup function is missing some logic. The cleanup function should stop or undo whatever the setup function was doing. The rule of thumb is that the user shouldn’t be able to distinguish between the setup being called once (as in production) and a setup → cleanup → setup sequence (as in development).
1213+
1214+
Read more about how this helps find bugs and how to fix your logic.

0 commit comments

Comments
 (0)