---
title: "`Math.random()` / `Date.now()` / `new Date()` evaluated in a component render body (lint/random-in-render)"
description: "lint/random-in-render: Server and client render different values, so React reports a hydration mismatch and patches the DOM (Aceternity background-beams…"
canonical: https://void-design.vercel.app/rules/lint/random-in-render
lastModified: 2026-09-16
---

# `Math.random()` / `Date.now()` / `new Date()` evaluated in a component render body

`lint/random-in-render` · severity **error** · category Lint · detected by `void lint` and `void audit`

## Why it matters

Server and client render different values, so React reports a hydration mismatch and patches the DOM (Aceternity background-beams randomises durations and SVG coordinates this way). Every re-render also re-randomises, restarting animations.

## How to fix it

Compute random values once: derive them deterministically from the index (seeded PRNG), generate them at module scope for static decoration, or create them in `useState(() => …)` inside a client component that renders the random part after mount.

## Example

```tsx
// deterministic per index: identical on server and client
const rand = (i: number) => ((Math.sin(i * 9301 + 49297) * 233280) % 1 + 1) % 1;
beams.map((_, i) => <path key={i} style={{ animationDelay: `${rand(i) * 4}s` }} />)
```

## References

- https://react.dev/link/hydration-mismatch

## More lint rules

`void lint` reports 67 rules in this category. Static source checks with no browser: Tailwind v4 silent failures, Next.js 16 API traps, React render-body bugs, accessibility markup, SEO files and motion hygiene.

- `multiple-h1` More than one `<h1>` in a route's page + layouts — [lint/multiple-h1](https://void-design.vercel.app/rules/lint/multiple-h1)
- `jsonld-deprecated-type` JSON-LD type that no longer produces rich results — [lint/jsonld-deprecated-type](https://void-design.vercel.app/rules/lint/jsonld-deprecated-type)
- `route-js-budget` Route first-load JS over budget (from `.next` build output) — [lint/route-js-budget](https://void-design.vercel.app/rules/lint/route-js-budget)
- `animate-undefined` `animate-*` class with no matching `--animate-*` theme variable or `@keyframes` — [lint/animate-undefined](https://void-design.vercel.app/rules/lint/animate-undefined)
- `duplicate-children-not-hidden` Children repeated for a marquee/loop without `aria-hidden` or `inert` on the copies — [lint/duplicate-children-not-hidden](https://void-design.vercel.app/rules/lint/duplicate-children-not-hidden)
- `conditional-hook` Hook called inside a JSX expression, `&&`, ternary or callback — [lint/conditional-hook](https://void-design.vercel.app/rules/lint/conditional-hook)
- `svg-global-id` Hardcoded `id` on an SVG `<filter>`, gradient, `<clipPath>` or `<mask>` inside a reusable component — [lint/svg-global-id](https://void-design.vercel.app/rules/lint/svg-global-id)
- `allocation-per-frame` `new Intl.NumberFormat` / `Intl.NumberFormat(` / `new Color(` inside an animation-frame callback — [lint/allocation-per-frame](https://void-design.vercel.app/rules/lint/allocation-per-frame)

Detected by `void lint` and `void audit`. Explain it in a terminal: `void rules lint/random-in-render`