How can I improve React performance using async/await?

How can I improve React performance using async/await?

Using async/await can help manage asynchronous operations more efficiently in React. It allows you to write cleaner code and handle promises more easily.

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 some common pitfalls when using async/await in React?

Common pitfalls include forgetting to handle errors with try/catch, not cleaning up async calls in useEffect, and causing unnecessary re-renders.