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
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).
_needsrender = false;
function render () {
_needsrender = true;
}
requestAnimationFrame(function hardrender () {
if (_needsrender) {
.... do stuff ....
_needsrender = false;
}
requestAnimationFrame(hardrender);
});