Why it matters
{mode === 'gradient' && }} />} (Magic UI magic-card) or style={{ y: useTransform(…) }} (Skiper19) changes hook order when the condition flips; React throws "Rendered more hooks than during the previous render".
How to fix it
Call every hook unconditionally at the top of the component and use the result conditionally.
Example
const background = useMotionTemplate`radial-gradient(${size}px at ${x}px ${y}px, var(--brand-subtle), transparent)`;
return mode === 'gradient' ? <motion.div style={{ background }} /> : null;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.
route-js-budgetRoute first-load JS over budget (from `.next` build output)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 copiessvg-global-idHardcoded `id` on an SVG `<filter>`, gradient, `<clipPath>` or `<mask>` inside a reusable componentallocation-per-frame`new Intl.NumberFormat` / `Intl.NumberFormat(` / `new Color(` inside an animation-frame callbacksetstate-per-pointer-moveReact state set inside a `mousemove` / `pointermove` / `scroll` handlerhardcoded-device-pixel-ratioCanvas/WebGL renders with a literal `devicePixelRatio: 2` (or `width * 2`)