From b87cdfdb1058efdb008a941184f002fe597f4132 Mon Sep 17 00:00:00 2001 From: rickhanlonii Date: Thu, 23 Mar 2023 18:42:15 +0000 Subject: [PATCH] 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. Screenshot 2023-03-15 at 10 56 17 AM ## 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 commit https://github.com/facebook/react/commit/f77099b6f1ccc658eff3467c6b9337e1b77ec854. --- .../vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js | 2 +- .../vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js | 4 ++-- .../react-test-renderer/cjs/ReactTestRenderer-profiling.js | 4 ++-- .../xplat/js/RKJSModules/vendor/react/cjs/React-dev.js | 2 +- .../xplat/js/RKJSModules/vendor/react/cjs/React-prod.js | 2 +- .../xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js | 2 +- .../xplat/js/react-native-github/Libraries/Renderer/REVISION | 2 +- .../Libraries/Renderer/implementations/ReactFabric-dev.fb.js | 2 +- .../Libraries/Renderer/implementations/ReactFabric-prod.fb.js | 4 ++-- .../Renderer/implementations/ReactFabric-profiling.fb.js | 4 ++-- .../Renderer/implementations/ReactNativeRenderer-dev.fb.js | 2 +- .../Renderer/implementations/ReactNativeRenderer-prod.fb.js | 4 ++-- .../implementations/ReactNativeRenderer-profiling.fb.js | 4 ++-- 13 files changed, 19 insertions(+), 19 deletions(-) diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js index 578ac1ec958fe..69fc6d9876c44 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-dev.js @@ -23649,7 +23649,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-next-51a7c45f8-20230322"; +var ReactVersion = "18.3.0-next-f77099b6f-20230322"; // Might add PROFILE later. diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js index 3499e3f4153d7..7da629e475833 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-prod.js @@ -8570,7 +8570,7 @@ var devToolsConfig$jscomp$inline_1029 = { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "18.3.0-next-51a7c45f8-20230322", + version: "18.3.0-next-f77099b6f-20230322", rendererPackageName: "react-test-renderer" }; var internals$jscomp$inline_1217 = { @@ -8601,7 +8601,7 @@ var internals$jscomp$inline_1217 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-51a7c45f8-20230322" + reconcilerVersion: "18.3.0-next-f77099b6f-20230322" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1218 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js index 9220aced9a83a..88a12d88aabd2 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react-test-renderer/cjs/ReactTestRenderer-profiling.js @@ -8995,7 +8995,7 @@ var devToolsConfig$jscomp$inline_1072 = { throw Error("TestRenderer does not support findFiberByHostInstance()"); }, bundleType: 0, - version: "18.3.0-next-51a7c45f8-20230322", + version: "18.3.0-next-f77099b6f-20230322", rendererPackageName: "react-test-renderer" }; var internals$jscomp$inline_1258 = { @@ -9026,7 +9026,7 @@ var internals$jscomp$inline_1258 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-51a7c45f8-20230322" + reconcilerVersion: "18.3.0-next-f77099b6f-20230322" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1259 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js index 1379efce3752d..da22b7721b9d5 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-dev.js @@ -27,7 +27,7 @@ if ( } "use strict"; -var ReactVersion = "18.3.0-next-51a7c45f8-20230322"; +var ReactVersion = "18.3.0-next-f77099b6f-20230322"; // ATTENTION // When adding new symbols to this file, diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js index dcdd7ad920993..695a9b460ea91 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-prod.js @@ -639,4 +639,4 @@ exports.useSyncExternalStore = function ( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-next-51a7c45f8-20230322"; +exports.version = "18.3.0-next-f77099b6f-20230322"; diff --git a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js index e276f56db612e..b39b22b2f48c7 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js +++ b/compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/cjs/React-profiling.js @@ -642,7 +642,7 @@ exports.useSyncExternalStore = function ( ); }; exports.useTransition = useTransition; -exports.version = "18.3.0-next-51a7c45f8-20230322"; +exports.version = "18.3.0-next-f77099b6f-20230322"; /* global __REACT_DEVTOOLS_GLOBAL_HOOK__ */ if ( diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION index a404c80f5997b..b0bbc865ab0da 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/REVISION @@ -1 +1 @@ -51a7c45f8799cab903693fcfdd305ce84ba15273 +f77099b6f1ccc658eff3467c6b9337e1b77ec854 diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js index a3340b0817d4b..c9156cb66330b 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-dev.fb.js @@ -26403,7 +26403,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-next-51a7c45f8-20230322"; +var ReactVersion = "18.3.0-next-f77099b6f-20230322"; function createPortal$1( children, diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js index 6b7d09b3dc829..1ba3ea558599a 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-prod.fb.js @@ -9506,7 +9506,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1049 = { findFiberByHostInstance: getInstanceFromNode, bundleType: 0, - version: "18.3.0-next-51a7c45f8-20230322", + version: "18.3.0-next-f77099b6f-20230322", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForViewTag: function () { @@ -9548,7 +9548,7 @@ var internals$jscomp$inline_1292 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-51a7c45f8-20230322" + reconcilerVersion: "18.3.0-next-f77099b6f-20230322" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1293 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js index 625c60a689f93..6984e329349e7 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactFabric-profiling.fb.js @@ -10214,7 +10214,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1128 = { findFiberByHostInstance: getInstanceFromNode, bundleType: 0, - version: "18.3.0-next-51a7c45f8-20230322", + version: "18.3.0-next-f77099b6f-20230322", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForViewTag: function () { @@ -10269,7 +10269,7 @@ var roots = new Map(), scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-51a7c45f8-20230322" + reconcilerVersion: "18.3.0-next-f77099b6f-20230322" }); exports.createPortal = function (children, containerTag) { return createPortal$1( diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js index ff4b5b47da2ac..c4548765d03ba 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-dev.fb.js @@ -27454,7 +27454,7 @@ function createFiberRoot( return root; } -var ReactVersion = "18.3.0-next-51a7c45f8-20230322"; +var ReactVersion = "18.3.0-next-f77099b6f-20230322"; function createPortal$1( children, diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js index 874ca320c4573..fe60e0cfaf143 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-prod.fb.js @@ -9695,7 +9695,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1111 = { findFiberByHostInstance: getInstanceFromTag, bundleType: 0, - version: "18.3.0-next-51a7c45f8-20230322", + version: "18.3.0-next-f77099b6f-20230322", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForViewTag: function () { @@ -9737,7 +9737,7 @@ var internals$jscomp$inline_1361 = { scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-51a7c45f8-20230322" + reconcilerVersion: "18.3.0-next-f77099b6f-20230322" }; if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) { var hook$jscomp$inline_1362 = __REACT_DEVTOOLS_GLOBAL_HOOK__; diff --git a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js index 5906f5dc92385..c64af1ced68cd 100644 --- a/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js +++ b/compiled-rn/facebook-fbsource/xplat/js/react-native-github/Libraries/Renderer/implementations/ReactNativeRenderer-profiling.fb.js @@ -10403,7 +10403,7 @@ var roots = new Map(), devToolsConfig$jscomp$inline_1190 = { findFiberByHostInstance: getInstanceFromTag, bundleType: 0, - version: "18.3.0-next-51a7c45f8-20230322", + version: "18.3.0-next-f77099b6f-20230322", rendererPackageName: "react-native-renderer", rendererConfig: { getInspectorDataForViewTag: function () { @@ -10458,7 +10458,7 @@ var roots = new Map(), scheduleRoot: null, setRefreshHandler: null, getCurrentFiber: null, - reconcilerVersion: "18.3.0-next-51a7c45f8-20230322" + reconcilerVersion: "18.3.0-next-f77099b6f-20230322" }); exports.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = { computeComponentStackForErrorReporting: function (reactTag) {