With .then/.catch syntax

import {useEffect, useState} from 'react'

function App() {
  const [products, setProducts] = useState([])
  const [isLoading, setIsLoading] = useState(false)

  useEffect(() => {
    setIsLoading(true)
    fetch('/dummydata.json')
    .then((response) => { return response.json()})
    .then((data) => {
      setProducts(data.products)
      setIsLoading(false)
    })
  }, [])

  if (isLoading) {
    return <p>Loading...</p>
  }

  return (
    <ul>
      {products.map(() => {
        <li key={products.id}>{products.title}</li>
      })}
    </ul>
  )

}

export default App

But useEffect also needs a cleanup function and error handling with try/catch if using async/await. And don’t forget an abort controller and a teardown function.

This is why some developers point to remix or Theo points to react query.