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.