ENGLISH·COURSE API
    Preparing search index...

    Function

    useIsHydrated

    • Client hook: reports whether React has finished hydrating the server-rendered HTML.

      Returns boolean

      false until hydration has committed, true afterwards

      Use it to gate any markup that legitimately differs between the server and the browser — values read from localStorage, window, or a provider that only resolves client-side (next-themes' useTheme is the motivating case). Rendering that markup during hydration triggers React's "server rendered HTML didn't match the client" error.

      Returns false on the server and during the client's hydration render, then true on every render after that. getServerSnapshot is what makes this work: React uses it both while generating HTML and while hydrating, so the first client render matches the server byte for byte.

      Preferred over the useState + useEffect(() => setMounted(true), []) pattern from the next-themes README because that one trips the React 19 react-hooks/set-state-in-effect lint rule.

      const isHydrated = useIsHydrated();
      const { theme } = useTheme();

      if (!isHydrated) return <Placeholder />;
      return <span>{theme}</span>;

    Settings

    Member Visibility