Hook - useAxios

import React from "react";
import ReactDOM from "react-dom";
import defaultaxios from "axios";
import { useEffect, useState } from "react";
import "./styles.css";
const useAxios = (opts, axiosInstance = defaultaxios) => {
  const [state, setState] = useState({
    loading: true,
    error: null,
    data: null
  });
  const [trigger, setTrigger] = useState(0);
  if (!opts.url) {
    return;
  }
  const refetch = () => {
    setState({
      ...state,
      loading: true
    });
    setTrigger(Date.now());
  };
  useEffect(() => {
    axiosInstance(opts)
      .then((data) => {
        setState({
          ...state,
          loading: false,
          data
        });
      })
      .catch((error) => {
        setState({ ...state, loading: false, error });
      });
  }, [state]);
  return { ...state, refetch };
};

function App() {
  const { loading, data, error, refetch } = useAxios({
    url: "yts.am/api/v2/list_movies.json"
  });
  console.log(loading, data, error);

  return (
    <div className="App">
      <h1>{data && data.status}</h1>
      <h2>{loading ? "Loading" : ""}</h2>
      <button onClick={refetch}> refetch</button>
    </div>
  );
}

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