61Implement useFetch() with loading, error, and cancellation

Implement useFetch(url). It fetches JSON from url and returns { data, error, loading, refetch }.

function Profile({ id }) {
  const { data, error, loading } = useFetch(`/api/users/${id}`);
  if (loading) return <Spinner />;
  if (error) return <p>Could not load: {error.message}</p>;
  return <h1>{data.name}</h1>;
}

Requirements

• loading is true while a request is in flight.
• A non-2xx response sets error to an Error whose message contains the status code, for example "HTTP 500".
• When url changes, abort the previous request with an AbortController, and never show data from an older URL.
• Abort the request when the component unmounts.
• An aborted request must not set error.
• url === null means "do not fetch": loading is false and nothing is requested.
• refetch() runs the request again for the current URL.