How do I use async/await in React?

How do I use async/await in React?

You can use async/await in React to handle asynchronous operations like API calls. Just define your function as async and use await for the promises.

Can you show me an example?

Sure! Here's a simple example:

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

Where should I call this fetchData function?

You can call fetchData inside a useEffect hook to fetch data when the component mounts. Like this:

useEffect(() => {
  fetchData();
}, []);

What if I need to handle loading states?

You can use a state variable to track loading. Set it to true before fetching and false after. Here's an example:

const [loading, setLoading] = useState(true);

const fetchData = async () => {
  setLoading(true);
  // fetch data
  setLoading(false);
};