useFetch Hook with Abort

import { useState, useEffect } from 'react';
export function useFetch(url) {
  const [data, setData]    = useState(null);
  const [loading, setLoad] = useState(true);
  const [error, setError]  = useState(null);
  useEffect(() => {
    const ctrl = new AbortController();
    fetch(url, { signal: ctrl.signal })
      .then(r => r.json()).then(setData)
      .catch(e => { if (e.name !== 'AbortError') setError(e.message); })
      .finally(() => setLoad(false));
    return () => ctrl.abort();
  }, [url]);
  return { data, loading, error };
}