What is hydration, and where does a hydration mismatch come from?

Hydration makes previously generated HTML interactive: React attaches the components' logic to it in the browser.

A mismatch happens when the client's initial output doesn't match the server's HTML.

Example causes: a random value during rendering, different dates or time zones, invalid HTML nesting, reading localStorage in a way that changes the first view.

'use client';
import { useEffect, useState } from 'react';

export default function SavedTheme() {
  const [theme, setTheme] = useState('light');
  useEffect(() => {
    setTheme(localStorage.getItem('theme') || 'light');
  }, []);
  return <p>{theme}</p>;
}

Pitfall: suppressHydrationWarning doesn't fix the cause. First I make sure the first render matches.