Remove layout effect warning on the server (#26395)

## Overview This PR unfortunately removes the warning emitted when using layout effects on the server: > useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes. ## Why this warning exists The new docs explain this really well. Adding a screenshot because as part of this change, we'll be removing these docs. <img width="1562" alt="Screenshot 2023-03-15 at 10 56 17 AM" src="https://user-images.githubusercontent.com/2440089/225349148-f0e57c3f-95f5-4f2e-9178-d9b9b221c28d.png"> ## Why are we changing it In practice, users are not just ignoring this warning, but creating hooks to bypass this warning by switching the useLayoutEffect hook on the server instead of fixing it. This battle seems to be lost, so let's remove the warning so at least users don't need to use the indirection hook any more. In practice, if it's an issue, you should see the problems like flashing the wrong content on first load in development. DiffTrain build for [f77099b6f1ccc658eff3467c6b9337e1b77ec854](facebook/react@f77099b)
jerrydev0927 · Mar 22, 2023 · 62f43c9 · 62f43c9
1 parent 5981f68
commit 62f43c9
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 57 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-51a7c45f8799cab903693fcfdd305ce84ba15273
+f77099b6f1ccc658eff3467c6b9337e1b77ec854
diff --git a/compiled/facebook-www/ReactDOMServer-dev.classic.js b/compiled/facebook-www/ReactDOMServer-dev.classic.js
@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-classic-b092829f";
+var ReactVersion = "18.3.0-www-classic-6cfaaf36";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -9737,21 +9737,6 @@ function useRef(initialValue) {
   }
 }
 
-function useLayoutEffect(create, inputs) {
-  {
-    currentHookNameInDev = "useLayoutEffect";
-
-    error(
-      "useLayoutEffect does nothing on the server, because its effect cannot " +
-        "be encoded into the server renderer's output format. This will lead " +
-        "to a mismatch between the initial, non-hydrated UI and the intended " +
-        "UI. To avoid this, useLayoutEffect should only be used in " +
-        "components that render exclusively on the client. " +
-        "See https://reactjs.org/link/uselayouteffect-ssr for common fixes."
-    );
-  }
-}
-
 function dispatchAction(componentIdentity, queue, action) {
   if (numberOfReRenders >= RE_RENDER_LIMIT) {
     throw new Error(
@@ -9914,7 +9899,7 @@ var HooksDispatcher = {
   useRef: useRef,
   useState: useState,
   useInsertionEffect: noop$1,
-  useLayoutEffect: useLayoutEffect,
+  useLayoutEffect: noop$1,
   useCallback: useCallback,
   // useImperativeHandle is not run in the server environment
   useImperativeHandle: noop$1,

diff --git a/compiled/facebook-www/ReactDOMServer-dev.modern.js b/compiled/facebook-www/ReactDOMServer-dev.modern.js
@@ -19,7 +19,7 @@ if (__DEV__) {
 var React = require("react");
 var ReactDOM = require("react-dom");
 
-var ReactVersion = "18.3.0-www-modern-ec55733c";
+var ReactVersion = "18.3.0-www-modern-51b09081";
 
 // This refers to a WWW module.
 var warningWWW = require("warning");
@@ -9496,21 +9496,6 @@ function useRef(initialValue) {
   }
 }
 
-function useLayoutEffect(create, inputs) {
-  {
-    currentHookNameInDev = "useLayoutEffect";
-
-    error(
-      "useLayoutEffect does nothing on the server, because its effect cannot " +
-        "be encoded into the server renderer's output format. This will lead " +
-        "to a mismatch between the initial, non-hydrated UI and the intended " +
-        "UI. To avoid this, useLayoutEffect should only be used in " +
-        "components that render exclusively on the client. " +
-        "See https://reactjs.org/link/uselayouteffect-ssr for common fixes."
-    );
-  }
-}
-
 function dispatchAction(componentIdentity, queue, action) {
   if (numberOfReRenders >= RE_RENDER_LIMIT) {
     throw new Error(
@@ -9673,7 +9658,7 @@ var HooksDispatcher = {
   useRef: useRef,
   useState: useState,
   useInsertionEffect: noop$1,
-  useLayoutEffect: useLayoutEffect,
+  useLayoutEffect: noop$1,
   useCallback: useCallback,
   // useImperativeHandle is not run in the server environment
   useImperativeHandle: noop$1,

diff --git a/compiled/facebook-www/ReactDOMServer-prod.classic.js b/compiled/facebook-www/ReactDOMServer-prod.classic.js
@@ -2395,7 +2395,7 @@ var HooksDispatcher = {
       return useReducer(basicStateReducer, initialState);
     },
     useInsertionEffect: noop$1,
-    useLayoutEffect: function () {},
+    useLayoutEffect: noop$1,
     useCallback: function (callback, deps) {
       return useMemo(function () {
         return callback;
@@ -3791,4 +3791,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-classic-589bfcce";
+exports.version = "18.3.0-www-classic-6b3bdd74";
diff --git a/compiled/facebook-www/ReactDOMServer-prod.modern.js b/compiled/facebook-www/ReactDOMServer-prod.modern.js
@@ -2328,7 +2328,7 @@ var HooksDispatcher = {
       return useReducer(basicStateReducer, initialState);
     },
     useInsertionEffect: noop$1,
-    useLayoutEffect: function () {},
+    useLayoutEffect: noop$1,
     useCallback: function (callback, deps) {
       return useMemo(function () {
         return callback;
@@ -3688,4 +3688,4 @@ exports.renderToString = function (children, options) {
     'The server used "renderToString" which does not support Suspense. If you intended for this Suspense boundary to render the fallback content on the server consider throwing an Error somewhere within the Suspense boundary. If you intended to have the server wait for the suspended component please switch to "renderToReadableStream" which supports Suspense on the server'
   );
 };
-exports.version = "18.3.0-www-modern-5ac25261";
+exports.version = "18.3.0-www-modern-ee5be7f3";
diff --git a/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js
@@ -9388,21 +9388,6 @@ function useRef(initialValue) {
   }
 }
 
-function useLayoutEffect(create, inputs) {
-  {
-    currentHookNameInDev = "useLayoutEffect";
-
-    error(
-      "useLayoutEffect does nothing on the server, because its effect cannot " +
-        "be encoded into the server renderer's output format. This will lead " +
-        "to a mismatch between the initial, non-hydrated UI and the intended " +
-        "UI. To avoid this, useLayoutEffect should only be used in " +
-        "components that render exclusively on the client. " +
-        "See https://reactjs.org/link/uselayouteffect-ssr for common fixes."
-    );
-  }
-}
-
 function dispatchAction(componentIdentity, queue, action) {
   if (numberOfReRenders >= RE_RENDER_LIMIT) {
     throw new Error(
@@ -9565,7 +9550,7 @@ var HooksDispatcher = {
   useRef: useRef,
   useState: useState,
   useInsertionEffect: noop$1,
-  useLayoutEffect: useLayoutEffect,
+  useLayoutEffect: noop$1,
   useCallback: useCallback,
   // useImperativeHandle is not run in the server environment
   useImperativeHandle: noop$1,

diff --git a/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js b/compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js
@@ -2360,7 +2360,7 @@ var HooksDispatcher = {
       return useReducer(basicStateReducer, initialState);
     },
     useInsertionEffect: noop$1,
-    useLayoutEffect: function () {},
+    useLayoutEffect: noop$1,
     useCallback: function (callback, deps) {
       return useMemo(function () {
         return callback;

diff --git a/compiled/facebook-www/WARNINGS b/compiled/facebook-www/WARNINGS
@@ -400,7 +400,6 @@
 "unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. %s"
 "unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React."
 "useInsertionEffect must not schedule updates."
-"useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes."
 "validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s"
 "validateDOMNesting(...): %s cannot appear as a descendant of <%s>."
 "validateDOMNesting: when childText is passed, childTag should be null"