Expand usage example and remove badges

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

@@ -343,7 +343,9 @@ This lets you read individual DOM nodes from the Map later.
 
 <Note>
 
-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.
+When Strict Mode is enabled, ref callbacks will run twice in development.
+
+Read more about [how this helps find bugs](/reference/react/StrictMode#fixing-bugs-found-by-re-running-ref-callbacks-in-development) in callback refs.
 
 </Note>
 

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

@@ -1200,3 +1200,15 @@ input { margin-left: 10px; }
 ```
 
 </Sandpack>
+
+---
+
+## Troubleshooting {/*troubleshooting*/}
+
+### My callback ref runs twice when the component mounts {/*my-callback-ref-runs-twice-when-the-component-mounts*/}
+
+When Strict Mode is on, in development, React runs setup and cleanup one extra time before the actual setup.
+
+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).
+
+Read more about how this helps find bugs and how to fix your logic.