An animated bar chart traces Japan's population from 1874 to 2025, making long-term growth, the population peak, and subsequent decline easy to compare visually.

A few weeks ago, I wrote about how to watch for media query changes with JavaScript. Today, I wanted to share a little custom React hook you can use to detect media changes and automatically trigger a new render when it happens. Let’s dig in! An example Let’s imagine you have a component with a video animation. function AnimatedChart ({ src }) { return ( <video autoPlay={true} muted={true} loop={true} src={src} > ); } If the user has prefers-reduced-motion enabled, you want to show a static image instead.

An animated chart shows changes in the populations of Cambodian provinces from 1998 to 2025, highlighting how population is distributed across the country over time.