React useReducedMotion Hook: Respect prefers-reduced-motion (2026)
A full-bleed parallax hero. An auto-scrolling carousel. A loading spinner that spins, bounces, and rotates. For most users that's just "modern." For someone with a vestibular disorder, migraine with aura, or Meniere's disease, it can trigger real nausea, dizziness, or a headache bad enough to close the tab — not annoyance, an actual physical symptom. That's why every major OS ships a "Reduce Motion" toggle (iOS since 2013, macOS, Windows, Android, GNOME), and why CSS exposes it to the web as the prefers-reduced-motion media feature.
useReducedMotion is the hook that reads that setting into React state — reactively, so it updates the instant the user flips the OS toggle, and safely, so it doesn't touch window during SSR. This post covers the real @reactuses/core API, what prefers-reduced-motion actually asks you to remove (it's narrower than "no motion at all"), and the three integration patterns you'll actually reach for.
The Naive Version
The obvious approach is window.matchMedia inside an effect:
