How promise works in React

How promise works in React

In React, Promises are useful to write asynchronous code to handle fetching data from backend API, handle response of API, handle error in case of failure of API OR to perform time consuming scenarios. Below example shows how Promises work in React.
Here, we will use useState and useEffect hooks to show how to handle asynchronous operations.

Here’s a step-by-step explanation with examples:
1. Creating a Promise: We’ll start by creating a Promise that simulates an asynchronous operation, such as fetching data from backend API.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous operation (e.g., fetching data from an API)
    setTimeout(() => {
      const data = { id: 1, name: 'John' };
      resolve(data); // Resolve with data
      // reject(new Error('Failed to fetch data')); // Reject with an error
    }, 1000);
  });
};

2. Using Promises in a Functional Component: We will create a functional component named MyComponent and use the useState hook to handle the component’s state. On component loads/mounts, we will use useEffect hook to perform the asynchronous operation.

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

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

  useEffect(() => {
    fetchData()
      .then(data => {
        setData(data);
      })
      .catch(error => {
        setError(error.message);
      });
  }, []); // Empty dependency array to run effect only once

  if (error) {
    return <div>Error: {error}</div>;
  }

  if (!data) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Data:</h1>
      <p>{JSON.stringify(data)}</p>
    </div>
  );
};

export default MyComponent;

In this example:

• We use the useState hook to create state variables for data and error.
• We use the useEffect hook to perform the asynchronous operation (calling fetchData()) when the component mounts. To run effect only once when component mounts we will pass empty array [] as a depedency.
• Inside the useEffect, we use the Promise’s then() method to handle the resolved data and update the state with setData(). We also use the catch() method to handle any errors and update the state with setError().

3. Rendering the Component: Finally, we render the MyComponent in the root component of our application or wherever it’s needed.

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

ReactDOM.render(<MyComponent />, document.getElementById('root'));

With this setup, when MyComponent mounts, the useEffect hook triggers the asynchronous operation (fetchData()). Once the Promise resolves, the component’s state is updated with the fetched data using setData(). If there’s an error, it’s caught and handled using setError(). The component renders different UI based on the state (loading, data, or error), providing a smooth user experience.