Skip to content

Rule · Lint

MotionValue .on("change") subscription in a component body

lint/motionvalue-subscribe-in-rendererrorvoid lintupdated

Why it matters

Subscribing during render adds a new listener on every render and never unsubscribes, so callbacks multiply and memory grows while the animation runs.

How to fix it

Use useMotionValueEvent(value, 'change', cb), or subscribe in useEffect and return the unsubscribe function.

Example

tsx
useMotionValueEvent(scrollY, 'change', (y) => setScrolled(y > 8))

References

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.