fix(HeightAnimation): avoid usage of useLayoutEffect during SSR #1749
Conversation
React warns about the usage of `useLayoutEffect` when React renders on the server (SSR). This behavior can be enabled with the `FAST_DEV` flag in gatsby-config. One "quick" fix is to use useEffect on the server, which again does nothing there. The React team has [some options](https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85) to that "problem". We basically use option 1, with this approach. Any other suggestions?
tujoworker
force-pushed
the
fix/ssr-usage-of-layout-effect
branch
from
8911e5c to
ce60b3a
Compare
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit ce60b3a:
|
✅ DNB Eufemia Portal deploy preview ready
|
There was a problem hiding this comment.
Thanks for the explanation.
I also think option 1 seems to be the the best, as long as the effect isn't important for first render.
I didn't have time to test this now, but can we experience/see a difference in the components that use our hooks from useHeightAnimation.tsx?
|
I did check it and could not find any 👍 But I also think it is just fine, because on SSR, there is no difference and on the browser, with re-hydration, |
## [9.39.1](v9.39.0...v9.39.1) (2022-11-24) ### Bug Fixes * **HeightAnimation:** avoid usage of useLayoutEffect during SSR ([#1749](#1749)) ([667059b](667059b))
|
🎉 This PR is included in version 9.39.1 🎉 The release is available on: Your semantic-release bot 📦🚀 |
React warns about the usage of `useLayoutEffect` when React renders on the server (SSR). This behavior can be enabled with the `FAST_DEV` flag in gatsby-config. One "quick" fix is to use useEffect on the server, which again does nothing there. The React team has [some options](https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85) to that "problem". We basically use option 1, with this approach. Any other suggestions?
React warns about the usage of
useLayoutEffectwhen React renders on the server (SSR).This behavior can be enabled with the
FAST_DEVflag in gatsby-config.One "quick" fix is to use useEffect on the server, which again does nothing there.
The React "team" has some options to that "problem". We basically use option 1, with this approach.
Any other suggestions?
PS: I tried to create a test. But invalidating both the document or the window object (
delete globalThis.window) makes the testing lib not rendering the component or hook.