Package Exports

react-abort-controller
react-abort-controller/dist/react-abort-controller.mjs
react-abort-controller/dist/react-abort-controller.umd.js

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 (react-abort-controller) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-abort-controller

This is a lib that provides a custom React hook to help you cancel your pending requests when needed.

Scenario example: Imagine your users trigger a costly api call and while they wait they change their mind and trigger the same api with different parameters (api concurrency!), or even navigate out of that screen unmounting your component.

It provides an AbortController that allows you to easily cancel ongoing HTTP GET requests, and helping to prevent memory leaks and improve the performance of your application. The hook also cancels any ongonig requests if your component unmounts.

Installation

npm install react-abort-controller

Usage

Here's a simple example of how to use the react-abort-controller in your custom React hook:

import React, { useState } from 'react';
import { useAbortController } from 'react-abort-controller';
import axios from "axios";

const useGetItems = () => {
  const [items, setItems] = useState<any | null>(null);
  const [error, setError] = useState<any>(null);
  const [loading, setLoading] = useState<boolean>(false);

  // Use our hook to get the controller and the abort function
  const [controller, abort] = useAbortController();

  const api = async (params: Params) => {
    // Calling 'abort' before making a new call
    abort();

    try {
      setLoading(true);
      setEngagementData(null);
      setError(null);

      const response = (await getItems({
        params,
        // Don't forget to add the controller signal
        signal: controller.current.signal,
      })) as unknown as any;

      setItems(items);
      setLoading(false);
    } catch (error) {
      if (error.message !== "canceled") {
        setError(error);
        setLoading(false);
      }
    }
  };

  return [api, items, loading, error];
};