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 578ac1ec95..69fc6d9876 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 3499e3f415..7da629e475 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 9220aced9a..88a12d88aa 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 1379efce37..da22b7721b 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 dcdd7ad920..695a9b460e 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 e276f56db6..b39b22b2f4 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 a404c80f59..b0bbc865ab 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 a3340b0817..c9156cb663 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 6b7d09b3dc..1ba3ea5585 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 625c60a689..6984e32934 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 ff4b5b47da..c4548765d0 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 874ca320c4..fe60e0cfaf 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 5906f5dc92..c64af1ced6 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) {