← Back to Demo Hub
Test #11React & Next.js Specific

Hydration Mismatch

Server and client render different content, causing hydration errors.

📋 Demo Instructions

  1. The error was triggered on page load
  2. Check your browser console (F12) for the error
  3. Wait 5-10 seconds for the error to be captured
  4. Go to Dashboard → Performance Monitoring
  5. Click "Fix with Carla" on the error
  6. Review the generated PR
🌍 Real-World Scenario
Using Date.now(), Math.random(), or browser-only values during initial render. Server generates one value, client generates a different one, breaking React's hydration process.
✅ Expected Fix
Move dynamic values into useEffect so they only run on the client, or use a stable value during SSR and update it after hydration.
Fix Confidence:MEDIUM

💻 Buggy Code

// Buggy Code
export default function Component() {
  const randomId = Math.random().toString();
  return <div id={randomId}>Content</div>;
}
// Warning: Text content did not match. Server: "0.123" Client: "0.789"
// Hydration failed because the server-rendered HTML didn't match

⚡ Error Triggered on Page Load

Check your browser console (F12) to see the error.

🔴 Error Log

Waiting for error to be triggered...

Hydration Mismatch Demo:

Timestamp: 1765675438071

Random: 0.5003

These values differ between server and client render, causing hydration warnings in the console.