Fetch data using useEffect hooks in React

fetchData.js

import React, { useState, useEffect } from 'react';

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

  useEffect( async () => {
    const response = await fetch(url)
    const data =  await response.json()
    const [ item ] = data.results
    setData(item)
    setLoading(false)
  }, [])

  return { data, loading }
}

function App() {
  const [count, setCount] = useState(0)
  const {data, loading} = useFetch('https://api.randomuser.me/')  

  return (
    <div className="App">
      <p>{`You clicked ${count} times`}</p>
      <button onClick={() => setCount(count + 1)}>Increase Count</button>
      {loading ? <div>...Loading</div> : <p>{data.name.first}</p>}
    </div>
  );
}

export default App;