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]>

Author: noahlemen

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

@@ -341,6 +341,14 @@ In this example, `itemsRef` doesn't hold a single DOM node. Instead, it holds a
 
 This lets you read individual DOM nodes from the Map later.
 
+<Note>
+
+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>
+
 </DeepDive>
 
 ## Accessing another component's DOM nodes {/*accessing-another-components-dom-nodes*/}

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

@@ -280,7 +280,7 @@ To support backwards compatibility, if a cleanup function is not returned from t
 #### Caveats {/*caveats*/}
 
 * 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.
-* 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.
+* 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.
 
 ---