NextJS & SSR Bug: Warning: Prop className did not match on useMediaQuery

[niconiahi]

Description

On a NextJS application, when using Chakra's useMediaQuery to determine a value for a Text prop, it prints an error about a non matching className on the server and the client

Link to Reproduction

https://codesandbox.io/s/festive-keller-6jhy5

Steps to reproduce

IN THE SANDBOX WORKS:

1. Run the code and check the console

IN MY NEXTJS APP WITH CHAKRA DOES NOT.
Am I missing something?

Code reference (same as codesandbox but in real app)
same happening to me when ussing useMediaQuery as so:

const useDevice = () => {
  const [isLargeDevice] = useMediaQuery('(min-width: 62em)')

  return {
    isLargeDevice,
  }
}

then used: (THIS THROWS AN ERROR)

  import { useDevice } from './useDevice'
  
  const { isLargeDevice } = useDevice()
  
   <Text color='white' textStyle={isLargeDevice ? 'body.bold.lg' : 'body.bold.md'}>
       Don't miss out on new proposals
   </Text>

used: (THIS DOESN'T)

   <Text color='white'>
       Don't miss out on new proposals
   </Text>

screenshot here:

Chakra UI Version

1.6.4

Browser

Google Chrome 91.0.4472.114

Operating System

• macOS
• Windows
• Linux

Additional Information

Relates to this issue:

#684

[segunadebayo]

Hi @niconiahi,

As mentioned in the docs,

Keep in mind this API relies on the user's browser support of window.matchMedia and will always return false if it is not supported or does not exist (e.g. during server-side rendering).

To fix this, I recommend waiting for the client to be re-hydrated by using a useEffect check, then you can return the value from useBreakpointValue

const [mounted, setMounted] = useState(false)
const value = useMediaquery(...)

useEffect(()=>{ 
  setMounted(true)
},[])

return mounted ? value : null

Be sure to add a spinner or skeleton to that portion of the page so there's no layout shift.

[aboveyunhai]

@segunadebayo maybe we should include your suggestion implementation in doc or inside the example code block?

Or you consider it might mislead some people how to use it without specific concern.
I felt like it should be indicated somewhere, it's pretty ambiguous with the text mentioned about SSR issues only.

[kimgysen]

So there is a mismatch in the className between server and client, and the solution is to add a spinner and set the value with useEffect to fix a media query? Maybe it's me, but that doesn't sound right.

[oiojin831]

It seems not working when I do it with remix..
any suggestion?

[aboveyunhai]

So there is a mismatch in the className between server and client, and the solution is to add a spinner and set the value with useEffect to fix a media query? Maybe it's me, but that doesn't sound right.

The idea of this code is to avoid rendering the hook value in server side because server does not have media query. didMount in useEffect is to enforce the hook value is only used in the client side. Nothing to do with loader. Spinner is just to make it look nicer and smoother in terms of UI/UX.

This particular hook is client side only. That's why I asked to include the implementation in doc, instead of using one line of text to mention it doesn't work in server side rendering. But depending on the readers' background knowledge, this also might not immediately obvious for them.
It requires you to know a little bit of SSR, CSR and some framework (like next.js) rendering process.

[oleksandr-danylchenko]

In my project I came up with a hook that can wrap the value that leads to a server-client mismatch:

export const useClientSideValue = <T>(value: T, ssrValue: T): T => {
  // Needed to prevent a mismatch between the first render on the server and the client
  const [mountedValue, setMountedValue] = useState(ssrValue);
  useEffect(() => setMountedValue(value), [value]);

  return mountedValue;
};

Usage:

const clientValue = useMediaquery(...);
const value = useClientSideValue(clientValue, '');