https://www.npmjs.com/package/visibility is a nice little package that encapsulates some of the browser compat issues, if you have out-of-date clients.

https://gist.github.com/STRML/cc368c46c2d7de8679196e69ddbcae...

The key is, even in your case (with price alerts), you'll still want to tick occasionally, thus the `FORCE_TICK_INTERVAL`.

React's own batching is smart enough to merge the work. For example, before the next tick, one component calls setState() 20 times, another calls it once. Only one rerender will actually be done.

Some more discussion on rAF batching here: https://github.com/petehunt/react-raf-batching/issues/8

    _needsrender = false;
    
    function render () {
        _needsrender = true;
    }

    requestAnimationFrame(function hardrender () {
         if (_needsrender) { 
          .... do stuff ....
          _needsrender = false;
         }
         requestAnimationFrame(hardrender);
    });

I see this done via debouncing for render operations that happen on repeated events, for instance typing (send query to server, then show matching results in a render of some list).

What might he be talking about? Well, it works something like this...

- The app fetches data from a server.

- The data is processed. This may be cheap, or expensive.

- The DOM is updated.

- The page layout is recomputed.

- The browser window is redrawn.

Certainly, the browser could skip the last step for invisible tabs. It can't skip redoing the layout, as the JS can read the computed layout back out; at most it could do the computation lazily, but that would be extra code and complexity. Everything prior to that step isn't under the browser's control.

The web-app coder could act on every single step in the chain, starting by throttling data fetches.

Why redraw an invisible window? In any ordinary paint routine, you query for the invalidated rectangle and only redraw what you must. In the case of pages that are out of view, then nothing needs redrawing.

Processes that are busy doing things they need not (like redrawing on a timer, polling a mouse) is why Apple starting highlighting offenders in macOS (what is hogging the battery??) and why I don't use Chrome on it - it just gobbles power keeping all of those tabs alive.

Hopefully these new changes will help.

        if (typeof window.document.hidden !== 'undefined') {
            hidden = 'hidden';
        }
        else if (typeof window.document.msHidden !== 'undefined') {
            hidden = 'msHidden';
        }
        else if (typeof window.document.webkitHidden !== 'undefined') {
            hidden = 'webkitHidden';
        }

        doVisualUpdates = !window.document[hidden];

https://github.com/Skilgarriff/react-user-focus

In general, the mantra for people who find this tough to fix should be, "Why didn't I use MVC, what a cretin I was!"

https://developer.mozilla.org/en-US/docs/Web/API/window/requ...

In addition to requestAnimationFrame this could be very handy!

Are there any gotchas you have experienced in using this API that I should look out for?

    doVisualUpdates = (document.hidden === true);