Package Exports

use-unmount-signal

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (use-unmount-signal) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

use-unmount-signal

useUnmountSignal is a React Hook to cancel promises when a component is unmounted. It uses the W3C-standard AbortSignal API to notify compatible promises when the calling component is unmounted.

API

`useUnmountSignal(): AbortSignal`

A React Hook that returns an AbortSignal object that is marked as aborted when the calling component is unmounted.

Example

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>
  );
}

With async function event handlers

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

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

  async function handleClick({ signal }) {
    if (signal.aborted) { throw new AbortError(); }

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

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

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