reactHooksCancel.js

import React, { useEffect, useRef } from 'react';

const Foo = () => {
  const tokens = useRef([]);
  
  useEffect(() => {
    // Same as componentWillUnmount
    return () => {
      tokens.current.forEach(token => {
        token.abort();
      })
    };
  }, []);
  
  const makeRequest = () => {
    const controller = new AbortController();
    tokens.current.push(controller);
    
    // Use this signal for Fetch
    dispatch('ACTION_REQUEST', { signal: controller.signal });
  };
};