question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Next] StrictMode

See original GitHub issue

I 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:closed
  • Created 4 years ago
  • Comments:7 (7 by maintainers)

github_iconTop GitHub Comments

3reactions
bmvantunescommented, Oct 31, 2019

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.

1reaction
bmvantunescommented, Nov 5, 2019

@quietshu sure! Tomorrow I’ll file the PR 😊

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found