React Tab Visibility Optimization

You could have used setInterval to instruct your React Web application to do certain actions frequently while it is executing;

• Running certain time-based calculations in memory
• Getting the final data file from your server
• Verifying if the system has a notice for an alert, etc.
• Getting geolocation and other data via a web API - etc.

These are all problems that often wear down and expense not just your web application but also the server, network, and API that you utilize for services.

Simultaneously, these problems might grow in the form of more potential faults, resulting in a greater amount of time needed to fix them.

In summary, how can React halt the activities specified by setInterval when we switch between Tabs and resume when the Tab becomes active again?

Browser’s Tabs

For a better understanding of this topic, I will illustrate it with a few examples below.

Tab Visibility Optimization

For this I prepared the example in the picture below. Our experiment is quite simple. We will print console.log every 300ms by setting a timer.

If console.log continues to write with 300ms interval when we go to another tab, we cannot achieve the performance optimization we want.

But if the ms time between when we go to another tab has increased, it means that our component is running when the tab is active.

https://onurdayibasi.dev/optimization-according-tab-visibility

In the picture above, 12.33.23, 12.33.26-12.33.49, that is, we had a 23-second break and then the fetching process started again.

Now let's examine the code.

function TabVisibilityOptimizationSample(props) {
  const documentVisible = useVisibilityChange();
  useIntervalWhen(
    () => {
      console.log('fetching:' + new Date().toISOString());
    },
    {ms: 3000, when: documentVisible, startImmediately: true},
  );

For this

useVisibilityChange: It is a custom hook that informs us whether the screen is visible or not, and informs us when the visibilty of the screen changes. (demo)

https://onurdayibasi.dev/uidev-customhooks/useVisibilityChange

useIntervalWhen: It is a custom hook that provides Interval Timer that we can run according to true/false state under certain conditions. (demo)

https://onurdayibasi.dev/uidev-customhooks/useIntervalWhen

Extra Information:

Libraries such as React Query contain a set of flags for such optimizations in the build-in. For example, if refetch is to be done during useQuery and this is a function running in the background, you can easily set this. You can read the Window Focus Refetching documentation for this.

Source Code

You may get the source code to better understand how it works by clicking on the adjacent download button.