How to useasync-await in ReactJS

Approach 1: Without Simplifying error callback

Utilizing async-await syntax in React simplifies error callback management for asynchronous operations, enabling synchronous-like code readability and debugging. By encapsulating asynchronous tasks in a try-catch block, errors can be caught and handled efficiently. This approach enhances code clarity, readability, and streamlines the error handling process in React applications.

Syntax:

const handler_name = async () => {
    try {
        //... await
    } catch (e) {
      //...
    }
};

Example: This example illustrates the above-mentioned approach

Javascript

import React, { useState } from 'react';
 
function ErrorHandlingExample() {
    const [error, setError] = useState(null);
 
    const delay = async (ms) => {
        return new Promise(resolve => setTimeout(resolve, ms));
    };
 
    const handleClick = async () => {
        try {
            await delay(2000);
            setError("Something went wrong!");
        } catch (e) {
            console.error(e);
        }
    };
 
    return (
        <div>
            <button onClick={async () => await handleClick()}>
                Simulate Error
            </button>
            {error && <p style={{ color: "red" }}>{error}</p>}
        </div>
    );
}
 
export default ErrorHandlingExample;

Step to Run the Application: Open the terminal and type the following command.

npm start

Output:

Output

How to simplify an error callback in ReactJS ?

This article discusses simplifying error callbacks in React, focusing on handling errors during actions like HTTP requests or JSON data interpretation. While default behavior logs errors in the console, the article advocates for improved user experience by implementing error handling to display user-friendly messages and prevent confusion in the application.