Real World Example

The same logic is needed on many pages: load data, remember saved jobs, know if the user is offline. Each becomes a custom hook used everywhere.

function useOnlineStatus() {
  const [online, setOnline] = useState(navigator.onLine);
  useEffect(() => {
    const on = () => setOnline(true);
    const off = () => setOnline(false);
    window.addEventListener('online', on);
    window.addEventListener('offline', off);
    return () => { window.removeEventListener('online', on); window.removeEventListener('offline', off); };
  }, []);
  return online;
}

function JobsPage() {
  const online = useOnlineStatus();
  const { data: jobs, loading } = useFetch('/api/jobs');
  const [saved, setSaved] = useLocalStorage('savedJobs', []);
  if (!online) return <p>You are offline. Showing {saved.length} saved jobs.</p>;
  return loading ? <Spinner /> : <JobList jobs={jobs} saved={saved} onSave={setSaved} />;
}