Optimizing React Video Players for Mobile Devices

Building a custom video interface in React is inherently tricky. The `timeupdate` event fires up to 4 times per second, meaning if your player component's state is tied to the current video time, you are triggering a massive re-render cascade that will instantly drain a mobile device's battery.

For platforms like SportyXi, where fans might watch a 3-hour match on their smartphones, power efficiency is just as important as visual fidelity. Instead of using `useState` for the progress bar, developers must leverage `useRef` directly coupled with the native DOM element.

When designing the SportyXi sports app, we completely decoupled the UI overlays from the core video loop. This architecture allows the SportyXi streaming engine to maintain a buttery smooth 60FPS UI overlay without bogging down the JavaScript main thread.