useAbortableFetch

Joke.js

import React, { useState } from 'react';
import useAbortableFetch from './useAbortableFetch';

const Joke = () => {
  const { json: joke, loading, error, abort } = useAbortableFetch(
    'http://api.icndb.com/jokes/random/?limitTo=[nerdy]&escape=javascript'
  );

  if (loading) return 'Loading...';
  if (error) return 'Error: ' + error;
  if (!joke) return null;
  return <div>{joke.value.joke}</div>;
};

export default Joke;

useAbortableFetch.js

import { useState, useEffect } from 'react';

const fetchData = async (url, signal, setState) => {
  try {
    const rsp = await fetch(url, { signal });
    const json = await rsp.json();

    setState(oldState => ({
      ...oldState,
      json,
      loading: false
    }));
  } catch (err) {
    const error = err.name !== 'AbortError' ? err.message : null;

    setState(oldState => ({
      ...oldState,
      error,
      loading: false
    }));
  }
};

const useAbortableFetch = url => {
  const [state, setState] = useState({
    json: null,
    loading: false,
    error: null,
    controller: null
  });

  useEffect(
    () => {
      const controller = new AbortController();
      setState({
        json: null,
        loading: true,
        error: null,
        controller
      });

      fetchData(url, controller.signal, setState);

      return () => controller.abort();
    },
    [url]
  );

  return {
    json: state.json,
    loading: state.loading,
    error: state.error,
    abort: () => state.controller && state.controller.abort()
  };
};

export default useAbortableFetch;