Skip to content

Rule · Lint

React state set inside a mousemove / pointermove / scroll handler

lint/setstate-per-pointer-movewarnvoid lintupdated

Why it matters

React Bits Magnet and SpotlightCard call setPosition on every pointer event (and Magnet attaches one window listener per instance), so the component and its children re-render up to 120×/s and INP degrades with the number of instances on the page.

How to fix it

Write per-frame values to a ref'd element's style or a CSS custom property (el.style.setProperty('--x', …)) or a MotionValue .set(); attach listeners to the element, gate with (hover: hover) and (pointer: fine) and skip under reduced motion.

Example

tsx
const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {
  const r = e.currentTarget.getBoundingClientRect();
  e.currentTarget.style.setProperty('--x', `${e.clientX - r.left}px`);
  e.currentTarget.style.setProperty('--y', `${e.clientY - r.top}px`);
};

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.