Skip to content

Commit

Permalink
Remove layout effect warning on the server (#26395)
Browse files Browse the repository at this point in the history
## 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 commit f77099b.
  • Loading branch information
rickhanlonii committed Mar 23, 2023
1 parent 2a91152 commit b87cdfd
Show file tree
Hide file tree
Showing 13 changed files with 19 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -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__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
Expand Down
Original file line number Diff line number Diff line change
@@ -1 +1 @@
51a7c45f8799cab903693fcfdd305ce84ba15273
f77099b6f1ccc658eff3467c6b9337e1b77ec854
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down Expand Up @@ -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__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down Expand Up @@ -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(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down Expand Up @@ -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__;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 () {
Expand Down Expand Up @@ -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) {
Expand Down

0 comments on commit b87cdfd

Please sign in to comment.