Swr: [Next] StrictMode

[bmvantunes]

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 :)

[sergiodxa]

If the data is already cached useLayoutEffect should avoid a double render when reading sync from cache, while useEffect will always render with empty data and again with data

[bmvantunes]

Thanks for the explanation, it makes sense :+1:

Is there anything I can do in order to remove the warning during server rendering?

[sergiodxa]

I think it's not possible, since useLayoutEffect is intended to avoid double render but doesn't run server side when doing SSR you are still going to have a double render, the SSR without data and the CSR with cached data.

[bmvantunes]

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.

[bmvantunes]

@pacocoursey @sergiodxa What do you think about the solution used in react-redux for this exact problem?
https://github.com/reduxjs/react-redux/blob/2eac86163be2bd5627dab3e33e8b4e0926895442/src/hooks/useSelector.js#L22

// React currently throws a warning when using useLayoutEffect on the server.
// To get around it, we can conditionally useEffect on the server (no-op) and
// useLayoutEffect in the browser. We need useLayoutEffect to ensure the store
// subscription callback always has the selector from the latest render commit
// available, otherwise a store update may happen between render and the effect,
// which may cause missed updates; we also must ensure the store subscription
// is created synchronously, otherwise a store update may occur before the
// subscription is created and an inconsistent state may be observed
const useIsomorphicLayoutEffect =
  typeof window !== 'undefined' ? useLayoutEffect : useEffect

[shuding]

@bmvantunes 👍on it

Could you file a PR with a comment to explain? I'd love to merge it.

[bmvantunes]

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