Next.js stability

no-hydration-mismatch

Flag non-deterministic values (`Math.random`, `Date.now`, `new Date()`) inline in JSX.

Non-deterministic expressions in JSX produce different server- and client-rendered HTML, triggering React's hydration warning. Safe inside `useEffect`/`useLayoutEffect`/`useMemo`/`useCallback` callbacks — those run after hydration.

Behavior

• Fixable: No.
• Suggestions: No.

Examples

Bad:

<time>{new Date().toLocaleTimeString()}</time>

Good:

useEffect(() => setNow(new Date()), []);
<time>{now?.toLocaleTimeString()}</time>

Related rules

• no-async-useeffectDisallow `useEffect(async () => …)` — returns a Promise instead of a cleanup.
• no-leaked-env-on-clientFlag non-public `process.env.X` reads from `"use client"` or `*.client.{ts,tsx}` files.
• no-server-only-in-clientForbid Node-core / DB-driver imports from `"use client"` and `*.client.{ts,tsx}` files.

Use it

Enable no-hydration-mismatch in your eslint.config.js:

import deslint from '@deslint/eslint-plugin';

export default [
  {
    plugins: { deslint },
    rules: {
      'deslint/no-hydration-mismatch': 'error',
    },
  },
];

Found a false positive? Report it on GitHub →

← Back to all rules