Error Handling in React Hooks

Errors and Exception Handling in React Hooks in 5 minutes

Mayank Gupta
Aug 18, 2020 · 3 min read

Error Handling in Hooks is quite Simple. In this article, we are going to demonstrate how to handle errors in React Hooks. We need to create a mechanism where, if the error occurs while working with a component, user should receive an Error Component rather than throwing a run time error from the component. We will be using React Hooks in order to achieve the desired functionality.

React Error Handling, Handling Exceptions in React Hooks, Exception Handling React, React Hooks Exception Handling
React Error Handling, Handling Exceptions in React Hooks, Exception Handling React, React Hooks Exception Handling
Error Handling in React Hooks

Error Handling Use Case Scenario

In this article, we will be creating a simple utility to divide 2 values, there might be a scenario, where the user might try to divide a number by 0, in this case an error should be thrown from JavaScript Code, resulting in runtime exception.

In this case rather than terminating the program unconditionally, which is the default behavior of the application, we will display an Error Component specifying a simple runtime error. The error Component that need to be displayed in given below.

https://gist.github.com/Mayankgupta688/fbddbba9553fb54cd3ad3420d630ce97

This is the simple Component containing a header tag with the Error message, this component should be displayed once the user tried to divide the number by 0.

Throwing Error From the React Component

In the below code, we are creating a simple function which throws a custom error when the denominator is 0. In case when the code returns a custom error, we need to show the ErrorComponent instead of Normal Component.

https://gist.github.com/Mayankgupta688/71394aab47a750a27195dec6d1a1a21d

Tracking Error Situation in case of Error

In case of Error, we can use a state variable to track the errors, In the below code, we have created a “hasError” state variable. As soon as the code enters the catch block, we can set this state variable to “true”

https://gist.github.com/Mayankgupta688/a7ff694b2a9e98b75a3882d72ff6a624

In the code above, we are calling getter function of “hasError” and assigning it to a value “true”. Now, at any time, if the value of this variable is set to true, we need to render the “ErrorComponent”.

When the setter “setHasError” is called and updated with the value “true”, the component tries to re-render. While Re-rendering, we can check if the variable value is true or false. If the value is true, render “ErrorComponent”. See the implementation below for the template code.

https://gist.github.com/Mayankgupta688/f088d53413bfa237ee204984a0245423

In the above code, we can see that if the value of “hasError” is true, we are rendering the “ErrorComponent”, else the normal HTML to take the user input and show the division output is displayed.

Getting it all Together

Now lets try to bring all these building blocks together. The building block for the code comprises of:

  1. State variable for “numerator”, “denominator” and “executionOutput”
  2. State Variable to track error Condition “hasError”
  3. As soon as the error condition arrives, “hasError” marked as true
  4. if “hasError” is true, render “ErrorComponent”
  5. If “hasError” is false, render the normal component to take user input

The entire code is given below:

https://gist.github.com/Mayankgupta688/029bada6b98a234d5268d905ca8fc042

You can try to update the editor code and try some real time scenario:

Wrap Up:

Error and Exception handling is an easy task in React. You can also access the following URL for more updates:

TechnoFunnel

TechnoFunnel focus on learning and understanding the programming concepts

TechnoFunnel

We are focussed towards learning different technologies like React, Angular, Machine Learning, Python, Golang and AWS. Follow us for detailed conceptual understanding of these technologies and Interview Preparations.

Mayank Gupta

Written by

9 Years of Experience with Front-end Technologies and MEAN Stack. Working on all Major UI Frameworks like React, Angular and Vue https://medium.com/technofunnel

TechnoFunnel

We are focussed towards learning different technologies like React, Angular, Machine Learning, Python, Golang and AWS. Follow us for detailed conceptual understanding of these technologies and Interview Preparations.