Hook error handling doesn't catch errors in ReactJS

In this article, we will see one of the common issues faced by ReactJS developers is the Hook error handling problem. This issue occurs when an error is thrown inside a Hook, but it is not caught and handled properly. As a result, the error goes unaddressed and can cause unexpected behavior in the application.

Example: In the below code, the `handleClick` function increments the count every time the button is clicked. However, if an error is thrown inside the `handleClick` function, it will not be caught and handled properly.  Here is an example of code that demonstrates the problem: 

import React, { useState } from 'react';

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

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

export default Example;

Output:

For example:

const handleClick = () => {
    throw new Error('Oops! Something went wrong.');
    setCount(count + 1);
};

In this scenario, the error message `"Oops! Something went wrong."` will be thrown but not caught and handled properly. This will result in the application breaking and displaying an error message in the console.

Output:

Example: In the below code, the `try`-`catch` block catches the error that is thrown and logs it to the console. This way, the error is properly handled and the application continues to run without breaking. The solution to this problem is to wrap the code inside the `handleClick` function in a `try`-`catch` block, like this:

import React, { useState } from "react";

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

    const handleClick = () => {
        try {
            setCount(count + 1);
            throw new Error("Oops! Something went wrong.");
        } catch (error) {
            console.error(error);
        }
    };

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

export default Example;

Output: