Registry / devops / react-use-cancel-token

react-use-cancel-token

library1.0.3jsnpmunverified

A React hook for canceling Axios requests using the AbortController API (newer, recommended) or legacy Axios cancel tokens (deprecated). Version 1.0.3, maintained, ships TypeScript types. Key differentiator: simplifies request cancellation in React components with a single hook, providing abort signal/cancel token generation and automatic cleanup. Compared to raw AbortController or Axios CancelToken, it integrates directly with React's lifecycle.

devops

npm install react-use-cancel-token

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · REACT-USE-CANCEL-T

react-use-cancel-token

devopsjavascriptv1.0.3

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useAbortController

✓ import useAbortController from 'react-use-cancel-token'

✗ import { useAbortController } from 'react-use-cancel-token'

Default import for the new hook. Do not use named import.

useCancelToken

✓ import { useCancelToken } from 'react-use-cancel-token'

✗ import useCancelToken from 'react-use-cancel-token'

Named import for the deprecated hook. Only import if you need legacy cancel token support.

useAbortController

✓ const useAbortController = require('react-use-cancel-token').default

✗ const useAbortController = require('react-use-cancel-token')

In CommonJS, use .default to access the default export.

Demonstrates using useAbortController to cancel previous Axios requests on re-click, with AbortSignal and error checking.

import React from 'react'; import axios from 'axios'; import useAbortController from 'react-use-cancel-token'; const Example = () => { const { newAbortSignal, cancelPreviousRequest, isCancel } = useAbortController(); const handleClick = async () => { cancelPreviousRequest(); try { const response = await axios.get('https://api.example.com/data', { signal: newAbortSignal() }); if (response.status === 200) { console.log(response.data); } } catch (err) { if (isCancel(err)) return; console.error(err); } }; return <button onClick={handleClick}>Fetch Data</button>; }; export default Example;

Debug

Known issues

deprecateduseCancelToken is deprecated. Use useAbortController instead.

fix

Replace import { useCancelToken } with import useAbortController from 'react-use-cancel-token' and use newAbortSignal() instead of newCancelToken().

affects: >=1.0.0

gotchaThe hook does not automatically cancel requests on component unmount. You must manually call cancelPreviousRequest() or implement useEffect cleanup.

fix

Add a useEffect that calls cancelPreviousRequest() on cleanup to prevent memory leaks.

affects: >=1.0.0

gotchaWhen using useCancelToken (deprecated), the cancelPreviousRequest function cancels the previous request by aborting the source. Ensure you call it before making a new request, not after.

fix

Call cancelPreviousRequest() right before the axios request (as shown in docs) to avoid race conditions.

affects: >=1.0.0

breakingThe hook relies on React's state update inside cancelPreviousRequest. If called outside a React component lifecycle (e.g., in a plain async function), it may cause warnings or errors.

fix

Only call cancelPreviousRequest from within a React side effect (useEffect, event handler) or after the component is mounted.

affects: >=1.0.0

deprecatedLegacy cancel token API is deprecated in Axios (since v0.22.0). Use AbortSignal approach for future compatibility.

fix

Switch to AbortController usage: useAbortController instead of useCancelToken, and pass signal instead of cancelToken.

affects: >=1.0.0

Errors

Common errors & fixes

TypeError: Cannot destructure property 'newAbortSignal' of 'useAbortController(...)' as it is undefined.

Importing useAbortController as a named export instead of default export.

fix

Change import to: import useAbortController from 'react-use-cancel-token'

Module not found: Can't resolve 'react-use-cancel-token'

Package not installed or incorrect import path.

fix

Run npm install react-use-cancel-token, and ensure import path is correct.

Warning: Can't perform a React state update on an unmounted component

Using cancelPreviousRequest after component unmount (e.g., in a dangling promise).

fix

Add a mounted ref or use the abortsignal in a useEffect cleanup to avoid state updates.

Cannot read property 'cancel' of undefined

Using useCancelToken (deprecated) with an uninitialized cancel source.

fix

Ensure you call newCancelToken() before each request, or update to useAbortController.

Upgrade

Version history

1.0.3latest on npm

Audit

Dependencies

reactrequiredRequired peer dependency for React hooks (^16.8.0 || ^17.0.0).

axiosrequiredNeeded to make requests that can be cancelled; hook relies on Axios request config.

Agent activity

11 hits · last 30 days

node

Amazon

Resources

githubhttps://github.com/AXeL-dev/react-use-cancel-token ↗

packagereact-use-cancel-token ↗

homepagehttps://axel-dev.github.io/react-use-cancel-token/ ↗