jwchang0206

import { useCallback, useEffect } from 'react';
import { useCancelTokens } from '../util/xhrHooks';
import { getItems as getItemsAction } from '.';

export const useItems = () => {
  const addCancelToken, cancelAll } = useCancelTokens;
  
  const getItems = useCallback(async () => {
    // Cancel existing getItems requests before call a new one
    cancelAll();

jwchang0206

import { useCallback, useEffect, useRef } from 'react';
import axios, { Canceler } from 'axios';

export const useCancelTokens = () => {
  const cancelTokens = useRef<Canceler[]>([]);
  
  // Add a cancel token in this hooks and return a generated token
  const addCancelToken = useCallback(() => {
    const { cancel, token } = axios.CancelToken.source();
    

jwchang0206

const CracoSwcPlugin = require('craco-swc');

module.exports = {
  plugins: [
    {
      plugin: {
        ...CracoSwcPlugin,
        overrideCracoConfig: ({ cracoConfig }) => {
          if (typeof cracoConfig.eslint.enable !== 'undefined') {
            cracoConfig.disableEslint = !cracoConfig.eslint.enable;

jwchang0206

const CracoSwcPlugin = require('craco-swc');

module.exports = {
  plugins: [
    {
      plugin: CracoSwcPlugin,
      options: {
        swcLoaderOptions: {
          jsc: {
            externalHelpers: true,

jwchang0206

const CracoSwcPlugin = require('craco-swc');

module.exports = {
  plugins: [
    {
      plugin: CracoSwcPlugin,
      options: {
        swcLoaderOptions: {
          jsc: {
            externalHelpers: true,

jwchang0206

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

const Foo = () => {
  const tokens = useRef([]);
  
  useEffect(() => {
    // Same as componentWillUnmount
    return () => {
      tokens.current.forEach(token => {
        token.abort();

jwchang0206

import React, { Component } from 'react';

class Foo {
  constructor(props) {
    super(props);
    
    this.tokens = [];
  }
  
  componentWillUnmount() {

jwchang0206

import axios, { CancelToken } from 'axios';

const source = CancelToken.source();

setTimeout(async () => {
  const { data } = await axios.get(url, { cancelToken: source.token }));
  alert(JSON.stringify(data));
}, 5000);

source.cancel();

jwchang0206

const controller = new AbortController();
const { signal } = controller;

setTimeout(async () => {
  const response = await fetch(url, { signal });
  const data = await response.json();
  
  alert(JSON.stringify(data));
}, 5000);

jwchang0206

{
  "name": "sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "cross-env TS_NODE_FILES=true mocha --exit --require ts-node/register --colors test/**/*.ts",
    "coverage": "nyc npm run test"
  },
  "keywords": [],