Deterministic rendering

Summary

Same props/state → same output — no Math.random(), Date.now(), locale drift in SSR without sync. Hydration requires deterministic first client render. Use seeded values or server-passed timestamps. Non-determinism causes flaky tests and hydration mismatches.

Code example

function Timestamp({ iso }) {
  // Server and client must render the same string initially
  const formatted = new Date(iso).toLocaleString('en-US', { timeZone: 'UTC' });
  return <time dateTime={iso}>{formatted}</time>;
}

Key points

• Same props/state → same output — no Math.random(), Date.now(), locale drift in SSR without sync.
• Hydration requires deterministic first client render.
• Use seeded values or server-passed timestamps.
• Non-determinism causes flaky tests and hydration mismatches.

Further reading

• Hydration mismatches
• Rendering on the server

Related concepts

• Optimistic UI rollback strategy
• Idempotent UI actions