Commit f77099b
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- packages
- react-dom/src/__tests__
- react-server/src
2 files changed
+2
-25
lines changedLines changed: 1 addition & 7 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
1607 | 1607 | | |
1608 | 1608 | | |
1609 | 1609 | | |
1610 | | - | |
1611 | | - | |
1612 | | - | |
1613 | | - | |
1614 | | - | |
1615 | | - | |
1616 | | - | |
| 1610 | + | |
1617 | 1611 | | |
1618 | 1612 | | |
1619 | 1613 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
440 | 440 | | |
441 | 441 | | |
442 | 442 | | |
443 | | - | |
444 | | - | |
445 | | - | |
446 | | - | |
447 | | - | |
448 | | - | |
449 | | - | |
450 | | - | |
451 | | - | |
452 | | - | |
453 | | - | |
454 | | - | |
455 | | - | |
456 | | - | |
457 | | - | |
458 | | - | |
459 | | - | |
460 | 443 | | |
461 | 444 | | |
462 | 445 | | |
| |||
633 | 616 | | |
634 | 617 | | |
635 | 618 | | |
636 | | - | |
| 619 | + | |
637 | 620 | | |
638 | 621 | | |
639 | 622 | | |
| |||
0 commit comments