react-cancelable v1.0.4

Table of Contents

1. Motivation
2. Instalation
3. Tools
   1. useCancelableReq
   2. useCancelableImg
   3. cancelable HOF
4. Fetch vs Axios
5. Best practices (WIP)

Motivation

In most of cases client consumes a lot of excess internet traffic. Modern web applications make a huge bunch of requests per conventional time unit then a lot of clients don't wait until all requests made by web app are finished. As a result, the browser expects data that will no longer be used.

With react-cancelable you can easily cancel requests at any step of the request's lifecycle and consume fewer traffic bytes.

Instalation

npm install react-cancelable

yarn add react-cancelable

Before installation be sure you have installed the required peer dependencies to your project

{
  "react": "^17.0.0",
}

Tools

useCancelableReq

Make cancelable request. Hook helps you to control request canceling by React Component Lifecycle or by your own.

Signature

type RequestFn = (controller: AbortController) => Promise<any>

type Opts = {
  isLazy?: boolean;
  cancelOnUnmount?: boolean;
  controller?: AbortController;
  onComplete?: (res: any) => void;
  onFail?: (error: any) => void
  onCancel?: VoidFunction;
}

type Artefacts = {
  res?: Response;
  data?: any;
  error?: any;
  isLoading: boolean;
  cancel: VoidFunction,
  makeLazyRequest: VoidFunction | null;
}

useCancelableReq(fn: RequestFn, opts?: Opts): Artefacts

API

Example

import React from 'react'
import { useCancelableReq } from 'react-cancelable'

function makeRequest(controller) {
  // Pass signal to your request
  return fetch("YOUR_ENDPOINT", { signal: controller.signal })
}

function Item() {
  const { data, isLoading, error } = useCancelableReq(makeRequest)

  return (
    <>
      {isLoading && <span>Loading...</span>}
      {error && <span>Error occured</span>}
      {data && <span>Data is fetched</span>}
    </>
  )
}

useCancelableImg

Make cancelable request. Hook helps you to cancel requested image.

Signature

type RequestFn = (controller: AbortController) => Promise<any>

type Opts = {
  isLazy?: boolean;
  cancelOnUnmount?: boolean;
  controller?: AbortController;
  onComplete?: (res: any) => void;
  onFail?: (error: any) => void
  onCancel?: VoidFunction;
}

type Artefacts = {
  res?: Response;
  src?: string;
  error?: any;
  isLoading: boolean;
  cancel: VoidFunction,
  makeLazyRequest: VoidFunction | null;
}

useCancelableImg(fn: RequestFn, opts?: Opts): Artefacts

API

Example

import React from 'react'
import { useCancelableReq } from 'react-cancelable'


function getImage(controller) {
  // Pass signal to your request
  return fetch('IMAGE_URL', { signal: controller.signal })
}

function Item() {
  const { src, isLoading, error } = useCancelableImg(getImage)

  return (
    <>
      {isLoading && <span>Loading...</span>}
      {src && <img src={src} />}
    </>
  )
}

cancelable HOF

Hight order function to create cancelable requests

Signature

type RequestFn = (controller: AbortController) => Promise<any>

type RequestPromise = Promise<any> & { cancel: VoidFunction }

cancelable(fn: RequestFn, controller?: AbortController): RequestPromise

API

Example

import { cancelable } from 'react-cancelable'

function makeRequest(controller) {
  return fetch("YOUR_ENDPOINT", { signal: controller.signal })
}

// Wrap your request
const request = cancelable(makeRequest)

setTimeout(() => {
  // Cancel request later
  request.cancel()
}, 1000)

Fetch vs Axios

There is no difference what HTTP client you use. Package have one important rule - HTTP client must accept AbortController signal.

function makeFetchRequest(controller) {
  return fetch("YOUR_ENDPOINT", { signal: controller.signal })
}

function makeAxiosRequest(controller) {
  return axios.get("YOUR_ENDPOINT", { signal: controller.signal })
}

Best practices (WIP)

Cancel multiple similar request via one AbortController. Each helper can take controller parameter.

import { cancelable } from 'react-cancelable'

const controller = new AbortController()

function makeRequest(controller) {
  return fetch("YOUR_ENDPOINT", { signal: controller.signal })
}

// Make requests
new Array(100).fill(0).forEach(() => { cancelable(makeRequest, controller) } )

setTimeout(() => {
  // Stop all pending requests
  controller.abort()
}, 1000)