Conditionally Rendering Elements and Classes without Hydration Error

[penguyen72]

Hi, I want to use theme to conditionally render an icon. I am trying to add a toggle button to switch between dark mode and light mode. It seems like doing theme === 'dark' ? <SunIcon /> : <MoonIcon /> causes hydration issues. Since theme is null on the server <MoonIcon /> will be set on the server and hydrated with <SunIcon /> if the user has dark mode set. How would I resolve this?

[abereghici]

Hi @penguyen72 !
Good question! I should document this use-case.
In my projects I did

export const useLoaded = () => {
  const [loaded, setLoaded] = React.useState(false)
  React.useEffect(() => setLoaded(true), [])
  return loaded
}

{theme === Theme.DARK && loaded && <SunIcon />}
{theme === Theme.LIGHT && loaded && <MoonIcon />}

Code

Not ideal, because this component will rerender twice. Another approach might be to render both icons and use display: none