useHasFocus() hook in React

Implement a hook in react that helps to determine if the application is in focus or not. This will help stop the background processing when the user is not focused or on the tab.

To create the useHasFocus() we will have to listen to the focus and blur events on the window.

Use useState to persist the state and useEffect to assign and remove the event listeners.

Whenever the window is blurred set the focus state to false, else whenever the window is focused, update the state to true.

Use the document.hasFocus() to get the initial state.

import { useState, useEffect } from "react";

const useHasFocus = () => {
  // get the initial state
  const [focus, setFocus] = useState(document.hasFocus());

  useEffect(() => {
    // helper functions to update the status
    const onFocus = () => setFocus(true);
    const onBlur = () => setFocus(false);

    // assign the listener
    // update the status on the event
    window.addEventListener("focus", onFocus);
    window.addEventListener("blur", onBlur);

    // remove the listener
    return () => {
      window.removeEventListener("focus", onFocus);
      window.removeEventListener("blur", onBlur);
    };
  }, []);

  // return the status
  return focus;
};

Test Case

Input:
const Example = () => {
  const focus = useHasFocus();
  console.log(focus);
  return <></>;
};

Output:
true
false // change the tab
true // back to the tab