How to fix How to fix "Hydration mismatch" in React in React

Open your browser's developer tools (F12) and look for red errors or yellow warnings mentioning "hydration". The error message usually indicates which element or text content is mismatched. Note the specific element name and the values that differ.

Identify any code that accesses browser APIs like window, document, localStorage, or navigator. Move this code into a useEffect hook. useEffect only runs on the client after hydration completes, ensuring the server and client render the same initial HTML.

// WRONG - renders differently on server vs client
export function TimeComponent() {
  const isClient = typeof window !== "undefined";
  return <div>{isClient ? new Date().toLocaleString() : "Loading..."}</div>;
}

// CORRECT - server and client match, then useEffect updates
export function TimeComponent() {
  const [time, setTime] = useState<string>("Loading...");
  
  useEffect(() => {
    setTime(new Date().toLocaleString());
  }, []);
  
  return <div>{time}</div>;
}

If you have a small element where a mismatch is unavoidable (like a dynamic timestamp), you can add suppressHydrationWarning={true} to that specific element. This silences the warning but does not fix the underlying issue. Use this only as a last resort for non-critical content.

<div suppressHydrationWarning>
  Generated at {new Date().toISOString()}
</div>

If you intentionally need to render different content on server versus client, use state to track whether you're on the client. On the first render, output server content; then useEffect updates to client content. React will not complain about the initial match.

export function ClientOnlyFeature() {
  const [isClient, setIsClient] = useState(false);
  
  useEffect(() => {
    setIsClient(true);
  }, []);
  
  return (
    <div>
      {isClient ? (
        <ClientSpecificContent />
      ) : (
        <ServerSafeContent />
      )}
    </div>
  );
}

If you fetch data during rendering, ensure the same data is available on both server and client. For Next.js, use getServerSideProps or getStaticProps to fetch data at build/request time and pass it as props. For other frameworks, fetch on the server and embed the data in the initial HTML so the client uses the same data.

// Next.js example
export async function getServerSideProps() {
  const data = await fetchData();
  return { props: { data } };
}

export default function Page({ data }) {
  // Both server and client receive the same data
  return <div>{data.title}</div>;
}

If a component cannot be fixed and always causes hydration mismatches, you can dynamically import it with SSR disabled (in Next.js). This prevents the server from rendering it, so no mismatch occurs.

import dynamic from "next/dynamic";

const ProblematicComponent = dynamic(
  () => import("./ProblematicComponent"),
  { ssr: false }
);

export default function Page() {
  return <ProblematicComponent />;
}

Build and run your production build locally to catch hydration issues before deployment. In Next.js, run npm run build && npm run start. Use browser DevTools to inspect the actual HTML sent by the server (View Page Source) and compare it to what React tries to render on the client. Use React Developer Tools browser extension to inspect component render output.