Move content to useRef reference page

Author: mattcarrollcode

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

@@ -282,90 +282,6 @@ To support backwards compatibility, if a cleanup function is not returned from t
 * 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 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.
 
-#### Troubleshooting: My ref points to a unmounted DOM node {/*my-ref-points-to-a-unmounted-dom-node*/}
-
-A `ref` callback function with a cleanup function that does not set `ref.current` to `null` can result in a `ref` to a unmounted node. Uncheck "Show Input" below and click "Submit" to see how the `ref` to the unmounted `<input>` is still accessible by the click handler for the form.
-
-<Sandpack>
-
-```js
-import { useRef, useState } from "react";
-
-export default function MyForm() {
-  const [showInput, setShowInput] = useState(true);
-  let inputRef = useRef();
-  const handleCheckboxChange = (event) => {
-    setShowInput(event.target.checked);
-  };
-  const handleSubmit = (event) => {
-    event.preventDefault();
-    if (inputRef.current) {
-      alert(`Input value is: "${inputRef.current.value}"`);
-    } else {
-      alert("no input");
-    }
-  };
-  const inputRefCallback = (node) => {
-    inputRef.current = node;
-    return () => {
-      // ⚠️ You must set `ref.current` to `null`
-      // in this cleanup function e.g.
-      // `inputRef.current = null;`
-      // to prevent hanging refs to unmounted DOM nodes
-    };
-  };
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <div>
-        <label>
-          <input
-            type="checkbox"
-            checked={showInput}
-            onChange={handleCheckboxChange}
-          />
-          Show Input
-        </label>
-      </div>
-      {showInput && (
-        <div>
-          <label>
-            Input:
-            <input
-              type="text"
-              defaultValue="value from input DOM node"
-              ref={inputRefCallback}
-            />
-          </label>
-        </div>
-      )}
-      <button type="submit">Submit</button>
-    </form>
-  );
-}
-```
-
-</Sandpack>
-
-To fix the hanging ref to the DOM node that is no longer rendered, set `ref.current` to `null` in the `ref` callback cleanup function.
-
-```js
-import { useRef } from "react";
-
-function MyInput() {
-  inputRef = useRef()
-  const inputRefCallback = (node) => {
-    ref.current = node;
-    return () => {
-      // ⚠️ You must set `ref.current` to `null` in this cleanup
-      // function to prevent hanging refs to unmounted DOM nodes
-      inputRef.current = null;
-    };
-  };
-  return <input ref={inputRefCallback}>
-}
-```
-
 ---
 
 ### React event object {/*react-event-object*/}