Skip to content

Rule · Lint

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

lint/random-in-rendererrorvoid lintupdated

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

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.