How to use async functions effectively in React components

Question

Can you tell me How to use async functions effectively in React components?

Answer 1

To use async functions effectively in React components:

Use useEffect for Side Effects

useEffect(() => {

  const fetchData = async () => {

    const response = await fetch(url);

    const data = await response.json();

    setState(data);

  };

  fetchData();

}, [dependencies]);

Handle Errors with try...catch

const fetchData = async () => {

  try {

    const response = await fetch(url);

    const data = await response.json();

    setState(data);

  } catch (error) {

    console.error("Error fetching data:", error);

  }

};