Why it matters
Number tickers (Magic UI NumberTicker, React Bits CountUp) build a formatter on every frame of a spring; WebGL backgrounds (React Bits Aurora) allocate colours per frame. Formatter construction costs ~50–100× a format() call and the garbage causes GC pauses mid-animation.
How to fix it
Create formatters and colour objects once (module scope or useMemo) and only call .format() / mutate inside requestAnimationFrame, useAnimationFrame, .on('change') or useMotionValueEvent callbacks.
Example
const fmt = useMemo(() => new Intl.NumberFormat(locale, { maximumFractionDigits: 0 }), [locale]);
useMotionValueEvent(spring, 'change', (v) => { if (ref.current) ref.current.textContent = fmt.format(v); });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.
animate-undefined`animate-*` class with no matching `--animate-*` theme variable or `@keyframes`random-in-render`Math.random()` / `Date.now()` / `new Date()` evaluated in a component render bodyduplicate-children-not-hiddenChildren repeated for a marquee/loop without `aria-hidden` or `inert` on the copiesconditional-hookHook called inside a JSX expression, `&&`, ternary or callbacksvg-global-idHardcoded `id` on an SVG `<filter>`, gradient, `<clipPath>` or `<mask>` inside a reusable componentsetstate-per-pointer-moveReact state set inside a `mousemove` / `pointermove` / `scroll` handlerhardcoded-device-pixel-ratioCanvas/WebGL renders with a literal `devicePixelRatio: 2` (or `width * 2`)button-missing-type`<button>` (or `as="button"` default) without an explicit `type`