Learn How to Handle Asynchronous Operations in React

Asynchronous operations are an integral part of modern web development, and they allow us to write non-blocking code that can improve the user experience of our applications. In this article, we will explore how to handle asynchronous operations in React using three different methods - Promises, Callbacks, and Async/Await.

Before we begin, make sure that you have Node.js and a code editor such as VSCode installed on your local machine. To follow along with the examples, create a new React project by running the following command in your terminal:

npx create-react-app async-demo

This will create a new React project in a directory called "async-demo".

Using Promises

Promises are a popular way to handle asynchronous operations in JavaScript, and they allow us to write code that is both readable and maintainable. In React, we can use Promises to fetch data from an external API and update the state of our components. Here's an example:

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

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then(response => response.json())
      .then(json => setData(json));
  }, []);

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default App;

In this example, we're using the fetch() function to make a GET request to an external API that returns a list of posts. We're then using Promises to handle the response, convert it to JSON, and update the state of our component with the resulting data. Finally, we're rendering the data as a list of items.

To replicate this example on your local machine, create a new file called App.js in the src directory of your React project and copy the code above into it. Then, run npm start to start the development server and view the application in your browser.

Using Callbacks

Callbacks are another way to handle asynchronous operations in JavaScript, and they are commonly used in older codebases or libraries that haven't yet adopted Promises or Async/Await. In React, we can use callbacks to handle events such as user input or button clicks. Here's an example:

import React, { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setTimeout(() => {
      setCount(count + 1);
    }, 1000);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

export default App;

In this example, we're using the useState() hook to create a state variable called count and a function called setCount() to update it. We're then using a callback function called handleClick() to increment the count by one after a delay of one second using the setTimeout() function. Finally, we're rendering the count and a button that triggers the callback when clicked.

Using Async/Await

Async/Await is a newer way to handle asynchronous operations in JavaScript, and it provides a more concise and readable syntax than Promises or Callbacks. In React, we can use Async/Await to make API requests or perform other asynchronous tasks. Here's an example:

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

function App() {
  const [data, setData] = useState([]);

  async function fetchData() {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    const json = await response.json();
    setData(json);
  }

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

  return (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default App;

In this example, we're using the async keyword to define a function called fetchData() that uses await to make a GET request to an external API and convert the response to JSON. We're then using the useEffect() hook to call fetchData() when the component mounts and update the state of our component with the resulting data. Finally, we're rendering the data as a list of items.

Application Screenshots

Promise implementation output

Callbacks implementation output

Async / Await implementation output

Conclusion

In conclusion, handling asynchronous operations is an essential skill for any React developer, and Promises, Callbacks, and Async/Await are three ways to do it effectively. By using these methods, we can make our code more readable, maintainable, and scalable. Try experimenting with each of these methods in your React projects and see which one works best for your use case.

Handling Asynchronous Operations in React