Co to hydration i skąd bierze się hydration mismatch?

Hydration sprawia, że wcześniej wygenerowany HTML staje się interaktywny: React wiąże z nim logikę komponentów w przeglądarce.

Mismatch występuje, gdy początkowy wynik klienta nie zgadza się z HTML z serwera.

Przykłady przyczyn: losowa wartość podczas renderowania, różne daty lub strefy czasowe, nieprawidłowe zagnieżdżenie HTML, odczyt localStorage zmieniający pierwszy widok.

'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>;
}

Pułapka: suppressHydrationWarning nie naprawia przyczyny. Najpierw zapewniam zgodny pierwszy render.