react-doctor/rendering-hydration-mismatch-time

Wrap dynamic time/random values in useEffect+useState (client-only) or add suppressHydrationWarning to the parent if intentional

• Category: Correctness
• Severity: warn
• Source: oxlint-plugin-react-doctor
• Framework: global
• Enabled when: always

Validation prompt

Use this to decide whether a fired diagnostic is real or a false positive.

Confirm a JSX {...} expression contains new Date(), Date.now(), Math.random(), performance.now(), or crypto.randomUUID() (directly or via a method chain like new Date().toLocaleString()), and the enclosing JSX element does NOT already carry suppressHydrationWarning. Server-rendered HTML diverges from the first client render.

Fix prompt

Use this once validation confirms the diagnostic is real.

Render the value only after mount: const [now, setNow] = useState<Date | null>(null); useEffect(() => setNow(new Date()), []); then render {now?.toLocaleString()}. If the divergence is intentional (a timestamp, random ID), add suppressHydrationWarning to the parent element. See https://react.dev/reference/react-dom/client/hydrateRoot#suppressing-unavoidable-hydration-mismatch-errors

Related rules

More Correctness rules from the rules reference:

• react-doctor/style-prop-object: Pass the `style` prop as an object literal like `{{ color: 'red' }}`, never a string or other primitive.
• react-doctor/void-dom-elements-no-children: Remove children from the void element, or use a non-void element if children are needed.
• react/jsx-key: Require a stable key on elements rendered from arrays or iterators so React can reconcile list items correctly.
• react/jsx-no-duplicate-props: Disallow duplicate props on a JSX element — React silently keeps only the last value.
• react/jsx-no-script-url: Disallow javascript: URLs in href — they execute arbitrary code, and React 19 throws on them.