You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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)
Copy file name to clipboardExpand all lines: compiled/facebook-www/ReactDOMServer-prod.classic.js
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -2395,7 +2395,7 @@ var HooksDispatcher = {
2395
2395
returnuseReducer(basicStateReducer,initialState);
2396
2396
},
2397
2397
useInsertionEffect: noop$1,
2398
-
useLayoutEffect: function(){},
2398
+
useLayoutEffect: noop$1,
2399
2399
useCallback: function(callback,deps){
2400
2400
returnuseMemo(function(){
2401
2401
returncallback;
@@ -3791,4 +3791,4 @@ exports.renderToString = function (children, options) {
3791
3791
'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'
Copy file name to clipboardExpand all lines: compiled/facebook-www/ReactDOMServer-prod.modern.js
+2-2Lines changed: 2 additions & 2 deletions
Original file line number
Diff line number
Diff line change
@@ -2328,7 +2328,7 @@ var HooksDispatcher = {
2328
2328
returnuseReducer(basicStateReducer,initialState);
2329
2329
},
2330
2330
useInsertionEffect: noop$1,
2331
-
useLayoutEffect: function(){},
2331
+
useLayoutEffect: noop$1,
2332
2332
useCallback: function(callback,deps){
2333
2333
returnuseMemo(function(){
2334
2334
returncallback;
@@ -3688,4 +3688,4 @@ exports.renderToString = function (children, options) {
3688
3688
'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'
Copy file name to clipboardExpand all lines: compiled/facebook-www/WARNINGS
-1Lines changed: 0 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -400,7 +400,6 @@
400
400
"unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. %s"
401
401
"unmountComponentAtNode(): The node you're attempting to unmount was rendered by another copy of React."
402
402
"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."
404
403
"validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s"
405
404
"validateDOMNesting(...): %s cannot appear as a descendant of <%s>."
406
405
"validateDOMNesting: when childText is passed, childTag should be null"
0 commit comments