react async fetching

Component.jsx

import { useEffect, useState } from 'react'

export const Component = () => {
  const [whatevers, setWhatevers] = useState([])
  const [isLoading, setIsLoading] = useState(false)
  const [error, setError] = useState()
  
  useEffect(() => {
    const loadWhatevers = async () => {
      // show loading status
      setLoading(true)
      
      try {
        // let's try to fetch our data
        const response = await fetch('https://some-url.com')
        const data = await response.json()
        
        // now that we have data, let's store it!
        setWhatevers(data)
      } catch (error) {
        // fetch failed, so we'll store the error
        setError(error)
      } finally {
        // regardless of success or error, 
        // we need to stop loading
        setLoading(false)
      }
    }
    
    // let's get to loadin' yall
    loadWhatevers()
    
    // since the dependency array is empty, we'll only
    // run this effect once. if we wanted to run it again
    // (like if the fetch depends on the value of a prop
    // or we want to let the user retry on error), we'd
    // need to add a variable in there to sync the effect with
  }, [])
  
  return (
    <div>
      <h1>Whatevers</h1>
    
      {isLoading && <p>Loading...</p>}
      {error && <p>Error: {error}</p>}
      {whatevers.map(whatever => (
        // render the whatever here
      )}
    </div>
  )
}