Skip to content

Commit f77099b

Browse files
authored
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.
1 parent 51a7c45 commit f77099b

File tree

2 files changed

+2
-25
lines changed

2 files changed

+2
-25
lines changed

packages/react-dom/src/__tests__/ReactDOMServerSelectiveHydration-test.internal.js

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1607,13 +1607,7 @@ describe('ReactDOMServerSelectiveHydration', () => {
16071607
);
16081608
}
16091609

1610-
let finalHTML;
1611-
expect(() => {
1612-
finalHTML = ReactDOMServer.renderToString(<App />);
1613-
}).toErrorDev([
1614-
'useLayoutEffect does nothing on the server',
1615-
'useLayoutEffect does nothing on the server',
1616-
]);
1610+
const finalHTML = ReactDOMServer.renderToString(<App />);
16171611

16181612
assertLog(['App', 'A', 'B']);
16191613

packages/react-server/src/ReactFizzHooks.js

Lines changed: 1 addition & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -440,23 +440,6 @@ function useRef<T>(initialValue: T): {current: T} {
440440
}
441441
}
442442

443-
export function useLayoutEffect(
444-
create: () => (() => void) | void,
445-
inputs: Array<mixed> | void | null,
446-
) {
447-
if (__DEV__) {
448-
currentHookNameInDev = 'useLayoutEffect';
449-
console.error(
450-
'useLayoutEffect does nothing on the server, because its effect cannot ' +
451-
"be encoded into the server renderer's output format. This will lead " +
452-
'to a mismatch between the initial, non-hydrated UI and the intended ' +
453-
'UI. To avoid this, useLayoutEffect should only be used in ' +
454-
'components that render exclusively on the client. ' +
455-
'See https://reactjs.org/link/uselayouteffect-ssr for common fixes.',
456-
);
457-
}
458-
}
459-
460443
function dispatchAction<A>(
461444
componentIdentity: Object,
462445
queue: UpdateQueue<A>,
@@ -633,7 +616,7 @@ export const HooksDispatcher: Dispatcher = {
633616
useRef,
634617
useState,
635618
useInsertionEffect: noop,
636-
useLayoutEffect,
619+
useLayoutEffect: noop,
637620
useCallback,
638621
// useImperativeHandle is not run in the server environment
639622
useImperativeHandle: noop,

0 commit comments

Comments
 (0)