What are the differences between async/await and promises in React?

What are the differences between async/await and promises in React?

Async/await is syntactic sugar over promises, making asynchronous code easier to read and write. Promises are objects that represent the eventual completion or failure of an asynchronous operation.

Can you give me an example of using async/await in a React component?

Sure! Here's a simple example:

import React, { useEffect, useState } from 'react';

const MyComponent = () => {
    const [data, setData] = useState(null);

    const fetchData = async () => {
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
    };

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

    return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};

This component fetches data when it mounts and displays it.

What are the advantages of using async/await over promises?

Async/await allows for a more synchronous style of writing asynchronous code, making it easier to read and maintain. It also helps in handling errors more gracefully using try/catch blocks.

Are there any downsides to using async/await?

One downside is that async/await can lead to unhandled promise rejections if not properly managed. Additionally, it may not be supported in older browsers without transpilation.