diff --git a/src/content/learn/manipulating-the-dom-with-refs.md b/src/content/learn/manipulating-the-dom-with-refs.md index 6dba3b4b62c..c387353f37a 100644 --- a/src/content/learn/manipulating-the-dom-with-refs.md +++ b/src/content/learn/manipulating-the-dom-with-refs.md @@ -361,7 +361,7 @@ Starting in React 19, callback refs can return a cleanup function. When the clea > ``` -When [Strict Mode](/reference/react/StrictMode) is on in canary and experimental channels, [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](/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. diff --git a/src/content/reference/react/StrictMode.md b/src/content/reference/react/StrictMode.md index 02e3c44dc67..23e6ea840bb 100644 --- a/src/content/reference/react/StrictMode.md +++ b/src/content/reference/react/StrictMode.md @@ -44,7 +44,7 @@ Strict Mode enables the following development-only behaviors: - Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering. - Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup. -- Your components will [detach and re-attach refs to components](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) to find bugs caused by missing ref cleanup. +- Your components will [detach and re-attach refs to components](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) to find bugs caused by missing ref cleanup. - Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode) #### Props {/*props*/} @@ -88,7 +88,7 @@ Strict Mode enables the following checks in development: - Your components will [re-render an extra time](#fixing-bugs-found-by-double-rendering-in-development) to find bugs caused by impure rendering. - Your components will [re-run Effects an extra time](#fixing-bugs-found-by-re-running-effects-in-development) to find bugs caused by missing Effect cleanup. -- Your components will [detach and re-attach refs to components](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) to find bugs caused by missing ref cleanup. +- Your components will [detach and re-attach refs to components](#fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development) to find bugs caused by missing ref cleanup. - Your components will [be checked for usage of deprecated APIs.](#fixing-deprecation-warnings-enabled-by-strict-mode) **All of these checks are development-only and do not impact the production build.** @@ -829,15 +829,15 @@ Without Strict Mode, it was easy to miss that your Effect needed cleanup. By run --- ### Fixing bugs found by detaching and re-attaching refs to components in development {/*fixing-bugs-found-by-cleaning-up-and-re-attaching-dom-refs-in-development*/} - -In canary and experimental channels, React will run an extra setup+cleanup cycle in development for refs to components, much like it does for Effects. + +In React 19, React will run an extra setup+cleanup cycle in development for refs to components, much like it does for Effects. React will detach refs to components that were created via `useRef` by setting `ref.current` to `null` before setting it to the DOM node or handle. For [`ref` callbacks](/reference/react-dom/components/common#ref-callback), React will call the callback function with the DOM node or handle as its argument. It will then call the callback's [cleanup function](reference/react-dom/components/common#returns) before calling the `ref` callback function again with the DOM node as its argument. You can read more about refs in [Manipulating the DOM with Refs.](/learn/manipulating-the-dom-with-refs) - + --- ### Fixing deprecation warnings enabled by Strict Mode {/*fixing-deprecation-warnings-enabled-by-strict-mode*/}