Async get for component data using axios and React Hooks

asyncget.js

import axios from 'axios'
import { useEffect, useState } from 'react'

export default function(url) {
  const [state, setState] = useState({ status: 'pending' })

  useEffect(() => {
    axios
      .get(url)
      .then((res) => {
        setState({
          status: 'ok',
          data: res.data,
        })
      })
      .catch((error) => {
        setState({
          status: 'error',
          error,
        })
      })
  }, [url])

  return state
}

foo.js

import React from 'react'
import useAsyncGet from '../asyncget'

const Foo = ({ fooId }) => {
  const foo = useAsyncGet(`http://api.foo.org/${fooId}`)

  if (foo.status === 'pending') {
    return <div>Loading...</div>
  }

  if (foo.status === 'ok') {
    return <div>{JSON.stringify(foo.data)}</div>
  }

  if (foo.status === 'error') {
    console.error(foo.error)
    return <div>Error fetching data.</div>
  }

  throw new Error(`Invalid fetch status: ${question.status}`)
}

export default Question