useEffect with Async & Await

We can’t use async & await directly to the useEffect hook

Wrong usage of async & await

useEffect(async () => {
  const {data} = await Axios.get("/api/products");
  setProducts(data);
}, []);

How to Fix?

1. Create a function inside useEffect hook

useEffect(() => {
  const fetchProducts = async () => {
    const {data} = await Axios.get("/api/products");
    setProducts(data);
  };
  fetchProducts();
}, []);

2. Create a function outside usdeEffect hook

useEffect(fetchProducts, []);

async function fetchProducts() {
  const {data} = await Axios.get("/api/products");
  setProducts(data);
}