[Next] StrictMode about swr

[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.

[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]

@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 😊

[bmvantunes]

Thanks for the explanation, it makes sense 👍

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.