useFetch.ts

// useFetch.ts
import { useEffect, useState } from 'react'

export interface IPosts {
  userId: number;
  id: number;
  title: string;
  body: string;
}

interface Response {
  loading: boolean;
  data: IPosts;
}

// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30551#issuecomment-461913188
function useAsyncEffect(effect: () => Promise<void | (() => void)>, dependencies?: any[]) {
  return useEffect(() => {
    const cleanupPromise = effect()
    return () => { cleanupPromise.then(cleanup => cleanup && cleanup()) }
  }, dependencies)
}

export const useFetch = (url: string): Response => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)

  // Similar to componentDidMount and componentDidUpdate:
  useAsyncEffect(async () => {
    const response = await fetch(url)
    const data = await response.json()

    setData(data)
    setLoading(false)
  }, [url]) // Only when url change it will update

  return {
    data,
    loading
  }
}