>_Building AppsWithout Code
Fix a problem / DETAILED TASK GUIDE

Fix a hydration mismatch

A hydration mismatch means the browser render does not match the HTML produced by the server. Common causes include time-dependent values, browser-only storage, invalid nesting, and different initial data.

BY BUILDING APPS WITHOUT CODEUPDATED OCT 14, 2026AI-ASSISTED TASK

Before you start

  • The full hydration warning and component stack.
  • The server-rendered route and the relevant component.
  • A reproducible page load, not only client navigation.

How to do it

  1. Capture the exact mismatch and identify the smallest affected component.
  2. Compare its initial server and browser values. Look for Date.now, random values, localStorage, and invalid HTML nesting.
  3. Make the first render deterministic and read browser-only state after mounting where appropriate.
  4. Test a fresh direct load and refresh. Verify the actual content instead of suppressing the warning globally.

Before & after

ILLUSTRATIVE EXAMPLE
const [theme, setTheme] = useState("light");
useEffect(() => {
  setTheme(localStorage.getItem("theme") || "light");
}, []);

The initial renders match and the intended browser preference is applied afterward. The example is a React component pattern, not a complete theme system.

MAKE IT YOURS

Use with an AI coding tool

1 Describe your change

Use your own words. You do not need a file name. The prompt asks the AI to preserve unrelated work.

We remember this choice on this device. Choosing a tool does not connect it to this website.

2 Copy your prompt

Read the complete prompt below, then copy it.

3 Paste into your AI coding tool

Open your website or app project in your AI coding tool. Paste this into its AI chat box and send it. The tool needs access to your project files to make changes.

A website address alone does not give an AI permission or access to edit it. This prompt goes into an AI chat, not a regular terminal window.

4 Check the result

Check initial load and navigation; do not merely suppress the warning.

Open your project preview and try the change. Review what changed before publishing. If it is wrong, use your tool’s undo or restore your saved project version.

If the result is not what you expected

The warning was hidden with suppression

That can leave the incorrect initial UI in place. Fix the cause unless the specific difference is intentional.

The page now flashes the wrong theme

A production theme implementation may need an earlier controlled initialization strategy.

Undo the change

Revert the targeted initialization change and keep the original error details for the next diagnostic step.

References & testing

The examples above explain the expected behavior; they are not a claim that this prompt has been tested in every framework or AI model. Test the proposed change in your actual project before publishing.

React: hydrateRoot ↗ · Our review approach