[Next] StrictMode
See original GitHub issueI started to use this library and I see a lot of potential in it! Thanks for the awesome work.
I use nextjs with StrictMode, so I started to notice the following message in my server-side logs:
Warning: 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://fb.me/react-uselayouteffect-ssr for common fixes.
Is there anything I can do on my side to avoid those messages?
PS - If I understand correctly, you are using “useLayoutEffect” to avoid running on the server. If my assumption is correct, is there any benefit from using “useLayoutEffect”, instead of “useEffect” with a check to see if we have window available? Sorry if this is a “dumb” question but I’m quite new to hooks 😃
Issue Analytics
- State:
- Created 4 years ago
- Comments:7 (7 by maintainers)
Top Results From Across the Web
React Strict Mode - next.config.js
React's Strict Mode is a development mode only feature for highlighting potential problems in an application. It helps to identify unsafe lifecycles, legacy...
Read more >React Strict Mode in Next.js - Netlify
Strict Mode is a tool for highlighting potential problems in a React application. It doesn't render any UI, but it adds extra warnings...
Read more >Strict Mode - React
StrictMode is a tool for highlighting potential problems in an application. Like Fragment , StrictMode does not render any visible UI.
Read more >Next.js: How to Disable/Enable React Strict Mode - Kindacode
React Strict Mode is a tool that runs in development mode only. It checks and highlights potential issues in your application such as...
Read more >Using strict mode in React 18: A guide to its new behaviors
In this article, you'll learn about Strict Mode, its various ... that App is generally the root component in create-react-app and Next.js.
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The only problem I’m seeing with using useLayoutEffect is that developers using StrictMode and server side rendering will be seeing this warning on every single page refresh that has “useSWR(…)”.
While developing that’s a bit distracting. If this warning is constantly appearing in the terminal, developers will start to ignore warnings - which is a bit against the initial idea of using StrictMode.
@quietshu sure! Tomorrow I’ll file the PR 😊