a custom hook for make easy and util fetch's with loading and error state using react

useFetch.js

import React from 'react'

const useFetch = () => {
  const [data, setData] = React.useState(null)
  const [error, setError] = React.useState(null)
  const [loading, setLoading] = React.useState(null)

  const request = React.useCallback(async (url, options) => {
    let response
    let json
    try {
      setError(null)
      setLoading(true)
      response = await fetch(url, options)
      json = await response.json()
      setData(json)
      setLoading(true)
    } catch (error) {
      setError(error)
    } finally {
      setLoading(false)
      return { response, json }
    }
  }, [])
  return { request, data, loading, error }
}

export default useFetch