Next.js App Router: "Hydration failed because the initial UI does not...

mike_plumbs

Next.js App Router: "Hydration failed because the initial UI does not match what was rendered on the server" when reading localStorage in useState Body: I'm using Next.js 14 (App Router). I want to store the user's theme preference in localStorage and read it on the first render, but I get a hydration error. jsx "use client"; import { useState } from "react"; export default function ThemeToggle() { const [theme, setTheme] = useState(...

Originally asked by Naeem Sagheer on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

uphilltech

Great question — answering as the UphillTech team:

You can’t safely read localStorage during the server render because it only exists in the browser. If the server HTML and the initial client render are different, React can cause a hydration mismatch. For normal client state, initialize it with a fixed value and read localStorage inside useEffect after the component mounts.useEffect solves the hydration issue, but it can cause a small theme flicker. If you want to avoid that too, use a cookie so the server knows the theme, or run a small script before hydration that reads localStorage and applies the theme

Full answer by Rehan Khan: https://stackoverflow.stackexchange.com/a/80007214 (CC BY-SA 4.0).

Need it done for your business? UphillTech.