Dear Frontend Developer,
I'm writing to you because your app loads my laptop heavily when I'm not even using it.
I normally keep dozens of tabs open simultaneously with Gmail, StackOverflow, Figma, whatever else I need for my work, and of course your app. You know, I really like your app, but a few days ago I noticed that it started eating up a lot of my laptop's CPU time and memory while the tab was not even active. I can only guess that your guy was recalculating very important statistics in the background, synchronizing my data with a server or mining crypto to make your dream of having your own island come true... you wouldn't do it with me, would you? ;-) Whatever important thing it did, it slowed my laptop down and made me sad. But I know you had only good intentions, so I want to help you make me happy again.
If you use JS timers to do something in the background, you can actually detect whether I'm using your app or not to pause background processes until I come back. Let's look at a simple React example which I composed to give you an idea on how you could do it.
The example app displays the current Ethereum price in US dollars. It requests the exchange rate from Coinstats.app Public API regularly to keep it up to date.
You can play with the example on Codesandbox.
The key piece of the code lays inside the timer callback:
const fetchData = async () => {
// Check whether the app has focus.
if (!window.document.hasFocus()) {
return;
}
// Here is your background logic.
}
Just one additional condition with document.hasFocus(). Easy, right? Then why don't you use it in your app?
Anyway, I'm sure you, your app and I can make friends again but it depends solely on you.