Skip to content

Commit 0b651e2

Browse files
committed
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 [f77099b](f77099b)
1 parent 192a05b commit 0b651e2

8 files changed

+11
-57
lines changed

compiled/facebook-www/REVISION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
51a7c45f8799cab903693fcfdd305ce84ba15273
1+
f77099b6f1ccc658eff3467c6b9337e1b77ec854

compiled/facebook-www/ReactDOMServer-dev.classic.js

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if (__DEV__) {
1919
var React = require("react");
2020
var ReactDOM = require("react-dom");
2121

22-
var ReactVersion = "18.3.0-www-classic-b092829f";
22+
var ReactVersion = "18.3.0-www-classic-6cfaaf36";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -9737,21 +9737,6 @@ function useRef(initialValue) {
97379737
}
97389738
}
97399739

9740-
function useLayoutEffect(create, inputs) {
9741-
{
9742-
currentHookNameInDev = "useLayoutEffect";
9743-
9744-
error(
9745-
"useLayoutEffect does nothing on the server, because its effect cannot " +
9746-
"be encoded into the server renderer's output format. This will lead " +
9747-
"to a mismatch between the initial, non-hydrated UI and the intended " +
9748-
"UI. To avoid this, useLayoutEffect should only be used in " +
9749-
"components that render exclusively on the client. " +
9750-
"See https://reactjs.org/link/uselayouteffect-ssr for common fixes."
9751-
);
9752-
}
9753-
}
9754-
97559740
function dispatchAction(componentIdentity, queue, action) {
97569741
if (numberOfReRenders >= RE_RENDER_LIMIT) {
97579742
throw new Error(
@@ -9914,7 +9899,7 @@ var HooksDispatcher = {
99149899
useRef: useRef,
99159900
useState: useState,
99169901
useInsertionEffect: noop$1,
9917-
useLayoutEffect: useLayoutEffect,
9902+
useLayoutEffect: noop$1,
99189903
useCallback: useCallback,
99199904
// useImperativeHandle is not run in the server environment
99209905
useImperativeHandle: noop$1,

compiled/facebook-www/ReactDOMServer-dev.modern.js

Lines changed: 2 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ if (__DEV__) {
1919
var React = require("react");
2020
var ReactDOM = require("react-dom");
2121

22-
var ReactVersion = "18.3.0-www-modern-ec55733c";
22+
var ReactVersion = "18.3.0-www-modern-51b09081";
2323

2424
// This refers to a WWW module.
2525
var warningWWW = require("warning");
@@ -9496,21 +9496,6 @@ function useRef(initialValue) {
94969496
}
94979497
}
94989498

9499-
function useLayoutEffect(create, inputs) {
9500-
{
9501-
currentHookNameInDev = "useLayoutEffect";
9502-
9503-
error(
9504-
"useLayoutEffect does nothing on the server, because its effect cannot " +
9505-
"be encoded into the server renderer's output format. This will lead " +
9506-
"to a mismatch between the initial, non-hydrated UI and the intended " +
9507-
"UI. To avoid this, useLayoutEffect should only be used in " +
9508-
"components that render exclusively on the client. " +
9509-
"See https://reactjs.org/link/uselayouteffect-ssr for common fixes."
9510-
);
9511-
}
9512-
}
9513-
95149499
function dispatchAction(componentIdentity, queue, action) {
95159500
if (numberOfReRenders >= RE_RENDER_LIMIT) {
95169501
throw new Error(
@@ -9673,7 +9658,7 @@ var HooksDispatcher = {
96739658
useRef: useRef,
96749659
useState: useState,
96759660
useInsertionEffect: noop$1,
9676-
useLayoutEffect: useLayoutEffect,
9661+
useLayoutEffect: noop$1,
96779662
useCallback: useCallback,
96789663
// useImperativeHandle is not run in the server environment
96799664
useImperativeHandle: noop$1,

compiled/facebook-www/ReactDOMServer-prod.classic.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2395,7 +2395,7 @@ var HooksDispatcher = {
23952395
return useReducer(basicStateReducer, initialState);
23962396
},
23972397
useInsertionEffect: noop$1,
2398-
useLayoutEffect: function () {},
2398+
useLayoutEffect: noop$1,
23992399
useCallback: function (callback, deps) {
24002400
return useMemo(function () {
24012401
return callback;
@@ -3791,4 +3791,4 @@ exports.renderToString = function (children, options) {
37913791
'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'
37923792
);
37933793
};
3794-
exports.version = "18.3.0-www-classic-589bfcce";
3794+
exports.version = "18.3.0-www-classic-6b3bdd74";

compiled/facebook-www/ReactDOMServer-prod.modern.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2328,7 +2328,7 @@ var HooksDispatcher = {
23282328
return useReducer(basicStateReducer, initialState);
23292329
},
23302330
useInsertionEffect: noop$1,
2331-
useLayoutEffect: function () {},
2331+
useLayoutEffect: noop$1,
23322332
useCallback: function (callback, deps) {
23332333
return useMemo(function () {
23342334
return callback;
@@ -3688,4 +3688,4 @@ exports.renderToString = function (children, options) {
36883688
'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'
36893689
);
36903690
};
3691-
exports.version = "18.3.0-www-modern-5ac25261";
3691+
exports.version = "18.3.0-www-modern-ee5be7f3";

compiled/facebook-www/ReactDOMServerStreaming-dev.modern.js

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -9388,21 +9388,6 @@ function useRef(initialValue) {
93889388
}
93899389
}
93909390

9391-
function useLayoutEffect(create, inputs) {
9392-
{
9393-
currentHookNameInDev = "useLayoutEffect";
9394-
9395-
error(
9396-
"useLayoutEffect does nothing on the server, because its effect cannot " +
9397-
"be encoded into the server renderer's output format. This will lead " +
9398-
"to a mismatch between the initial, non-hydrated UI and the intended " +
9399-
"UI. To avoid this, useLayoutEffect should only be used in " +
9400-
"components that render exclusively on the client. " +
9401-
"See https://reactjs.org/link/uselayouteffect-ssr for common fixes."
9402-
);
9403-
}
9404-
}
9405-
94069391
function dispatchAction(componentIdentity, queue, action) {
94079392
if (numberOfReRenders >= RE_RENDER_LIMIT) {
94089393
throw new Error(
@@ -9565,7 +9550,7 @@ var HooksDispatcher = {
95659550
useRef: useRef,
95669551
useState: useState,
95679552
useInsertionEffect: noop$1,
9568-
useLayoutEffect: useLayoutEffect,
9553+
useLayoutEffect: noop$1,
95699554
useCallback: useCallback,
95709555
// useImperativeHandle is not run in the server environment
95719556
useImperativeHandle: noop$1,

compiled/facebook-www/ReactDOMServerStreaming-prod.modern.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2360,7 +2360,7 @@ var HooksDispatcher = {
23602360
return useReducer(basicStateReducer, initialState);
23612361
},
23622362
useInsertionEffect: noop$1,
2363-
useLayoutEffect: function () {},
2363+
useLayoutEffect: noop$1,
23642364
useCallback: function (callback, deps) {
23652365
return useMemo(function () {
23662366
return callback;

compiled/facebook-www/WARNINGS

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -400,7 +400,6 @@
400400
"unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. %s"
401401
"unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React."
402402
"useInsertionEffect must not schedule updates."
403-
"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."
404403
"validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s"
405404
"validateDOMNesting(...): %s cannot appear as a descendant of <%s>."
406405
"validateDOMNesting: when childText is passed, childTag should be null"

0 commit comments

Comments
 (0)