Rest API React hook

ComponentWithFetch.tsx

import { useRestAPI } from './hooks/useRestAPI';

export function ComponentWithFetch() {
  const result = useRestAPI<DataShape>({ url });
  const { loading, error, data } = result;
  if (loading) {
    return <Loading />;
  }
  if (error) {
    return <Error />;
  }
  if (data) {
    return (
      <div>
        <p>Sweet we have data!</p>
        {data.sweetArrayOfData.map(item => (
          <p key={item.id}>{item.name}</p>
        ))}
      </div>
    );
  }
}

withRestAPI.tsx

import fetch from 'isomorphic-unfetch';
import { useEffect, useState } from 'react';

export interface UseRestAPIProps {
  url: string;
}

interface Result<DataShape> {
  data?: DataShape;
  error?: Error;
  loading: boolean;
}

export function useRestAPI<DataShape>(props: UseRestAPIProps) {
  const { url } = props;
  const [result, setResult] = useState<Result<DataShape>>({
    data: undefined,
    error: undefined,
    loading: true,
  });

  useEffect(
    () => {
      fetch(url)
        .then((res: any) => res.json())
        .then((resData: any) => setResult({ loading: false, data: resData }))
        .catch((err: Error) => setResult({ loading: false, error: err }));
    },
    [url]
  );

  return result;
}