Abort request on navigate in React

abort-request-on-navigate.js

import { cid, useInject } from 'inversify-hooks';
import React, { Suspense, useEffect } from 'react';
import { Redirect, Route, Switch, useHistory } from 'react-router-dom';
import { exampleModule } from './example';
import { IHttpService } from './shared';
import { styleGuideModule } from './style-guide';

let didTheUserNavigatedForTheFirstTime = false;
export default function AppRouter() {
  const history = useHistory();
  const [httpService] = useInject<IHttpService>(cid.IHttpService);

  useEffect(() => history.listen(() => abortCurrentRequests), [abortCurrentRequests, history]);
  const LoadingMessage = () => <div>Loading..</div>;

  function abortCurrentRequests() {
    setTimeout(() => (didTheUserNavigatedForTheFirstTime = true));

    if (history.action === 'POP' || !didTheUserNavigatedForTheFirstTime) {
      return;
    }

    httpService.resetCancelTokens();
  }

  return (
    <Suspense fallback={<LoadingMessage />}>
      <Switch>
        <Route exact={true} path="/" render={() => <Redirect to="/example" />} />
        {exampleModule.routes}
        {styleGuideModule.routes}
      </Switch>
    </Suspense>
  );
}