import useUnmountSignal from 'use-unmount-signal';

function Example() {
  // useUnmountSignal returns an AbortSignal object that APIs like fetch accept
  const unmountSignal = useUnmountSignal();
  return (
    <button
      onClick={() =>
        fetch('https://ping.example.com', { signal: unmountSignal })
      }>
      Ping
    </button>
  );
}

import { useState } from 'react';
import useUnmountSignal from 'use-unmount-signal';

function Example() {
  const unmountSignal = useUnmountSignal();
  const [status, setStatus] = useState('ready');

  const handleClick = useCallback(
    async () => {
      if (unmountSignal.aborted) { throw new AbortError(); }

      const response = await fetch('https://ping.example.com', { signal: unmountSignal });
      if (unmountSignal.aborted) { throw new AbortError(); }

      // We are guaranteed that the component is still mounted at this point
      if (response.ok) {
        setStatus('OK');
      } else {
        setStatus(response.status);
      }
    },
    [unmountSignal, setStatus]
  );

  return <button onClick={handleClick}>Ping {status}</button>;
}