React Cancelable Axios

index.jsx

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import axios from "axios";

function useAxios(fetchAction) {
  useEffect(() => {
    const signal = axios.CancelToken.source();
    fetchAction({ signal });
    return () => {
      signal.cancel("Api is being canceled");
    };
  }, []);
}

function User() {
  const [result, setResult] = useState(null);

  useAxios(({ signal }) => {
    async function getUser() {
      const res = await axios.get("https://randomuser.me/api/", {
        cancelToken: signal.token
      });
      setResult(res.data.results[0]);
    }

    getUser();
  });

  return (
    <div>
      {result && (
        <p>
          {result.name.title} {result.name.first} {result.name.last}
        </p>
      )}
    </div>
  );
}

function App() {
  const [mounted, setMounted] = useState(true);

  return (
    <div>
      <button onClick={() => setMounted(!mounted)}>click</button>
      <div>{mounted && <User />}</div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);