usePageFocusEffect – Run Effects on Tab Focus/Blur in React

Overview

Runs callbacks on visibility transitions — not on every render. onVisible fires on hidden → visible, onHidden fires on visible → hidden. The initial render is not treated as a transition. onVisible may return a cleanup function, just like useEffect.

Usage

import { usePageFocusEffect } from "react-visibility-hooks";

function MyComponent() {
  usePageFocusEffect({
    onVisible: () => {
      console.log("Welcome back! Refetching…");
      refetchData();
      return () => console.log("cleanup on next transition");
    },
    onHidden: () => {
      saveScrollPosition();
    },
  });

  return <div>…</div>;
}

Analytics tracking

usePageFocusEffect({
  onVisible: () => {
    analytics.track("tab_returned");
  },
  onHidden: () => {
    analytics.track("tab_left", { duration: getSessionDuration() });
  },
});

API

Parameters

Parameter	Type	Description
options	PageFocusEffectOptions	Configuration

Options (PageFocusEffectOptions)

Option	Type	Description
onVisible	() => void | (() => void)	Fires on hidden → visible. May return a cleanup function
onHidden	() => void	Fires on visible → hidden

Returns

void