Text content does not match server-rendered HTML

What is Text content does not match server-rendered HTML?

A subclass of hydration warnings, this occurs when text characters (rather than HTML element tags) differ between the server build and client rendering (such as rendering current timestamps or localized messages that change dynamically).

Common Causes

• Rendering new Date() directly inside component text blocks.
• Displaying random numbers (Math.random()) or client-specific sizes.
• Varying texts dynamically using client geolocation settings.

Common Mistakes

• Printing localized currencies or times directly on server outputs without locking the timezone locale configurations.

How to Fix

Framework-Specific Examples

No framework examples required for this informational status.

export default function Clock() {
  return <div>{new Date().toLocaleTimeString()}</div>;
}

import { useState, useEffect } from 'react';

export default function Clock() {
  const [time, setTime] = useState('');
  
  useEffect(() => {
    setTime(new Date().toLocaleTimeString());
  }, []);

  return <div>{time}</div>;
}

Best Practices

• Isolate dynamic state updates inside client hooks.

Frequently Asked Questions (FAQ)