Hydration Error on next-theme

Hydration Error (is actually not an error)

This error accure when server-rendered HTML does not match with the client result. in my case, it appears when I use next-theme. It appear in hooks that next-theme used (in [theme, setTheme]). when client start the lifecycle to componentDidMount or React.useEffect(fn, []) the client rendered the theme and that's cause the Hydration Error.

for example:

• code:

     import { useTheme } from 'next-theme';
  
     export function helloWorld() {
        const [theme, setTheme] = useTheme();
  
        return (
           <>{theme}<>
        );
     }
  jsx
  

  the server-rendered will send an empty div, theme is not rendered from the server, so it's just <><> instead of <>{theme}<>

• when the code is received to client, the theme got rendered. so this is where I am right NOW.

  • server source:

    <><>
    html
    

  • NOW:

    <>dark<>
    html
    

    note: my chrome default color-scheme is dark

• as can be seen that there is difference between server source and NOW. that cause the Hydration Error.

• insisting a value is a way to get rid of Hydration Error. {theme ? theme : 'dark'}.