Using the State Hook

gistfile1.txt

import {useAsync} from 'react-use';

const Demo = ({url}) => {
  const state = useAsync(async () => {
    const response = await fetch(url);
    const result = await response.text();
    return result
  }, [url]);

  return (
    <div>
      {state.loading
        ? <div>Loading...</div>
        : state.error
          ? <div>Error: {state.error.message}</div>
          : <div>Value: {state.value}</div>
      }
    </div>
  );
};

state.js

import React, { useEffect, useState } from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import Progress from './Progress'

const callFakeAPI = delay =>
  new Promise(resolve => {
    setTimeout(resolve, delay)
  })

const App = () => {
  const [isLoading, setIsLoading] = useState(true)

  useEffect(() => {
    ;(async () => {
      await callFakeAPI(3000)
      setIsLoading(false)
    })()
  }, [])

  return (
    <React.Fragment>
      <Progress isAnimating={isLoading} />
      <h1>{isLoading ? 'Loading...' : 'Loaded!'}</h1>
    </React.Fragment>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))