ReactJS componentDidCatch() Method
Last Updated :
10 Aug, 2021
The componentDidCatch() method is invoked if some error occurs during the rendering phase of any lifecycle methods or any children components. This method is used to implement the Error Boundaries for the React application. It is called during the commit phase, so unlike getDerivedStateFromError() which was called during the render phase, side-effects are allowed in this method. This method is also used to log errors.
Syntax:
componentDidCatch(error, info)
Parameters: It accepts two parameters i.e, error, and info as described below:
- error: It is the error that was thrown by the descendant component.
- info: It stores the componentStack trace of which component has thrown this error.
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. folder name, move to it using the following command:
cd foldername
Project Structure: It will look like the following.
Project Structure
Example: Program to demonstrate the use of componentDidCatch() method.
Filename: App.js:
Javascript
import React, { Component } from 'react' ;
export default class App extends Component {
state = {
error: false ,
};
componentDidCatch(error) {
this .setState({
error: true
});
}
render() {
return (
<React.StrictMode>
<div>
{ this .state.error ? <div>Some error</div> : <GFGComponent />}
</div>
</React.StrictMode>
);
}
}
class GFGComponent extends Component {
render() {
return <h1>{ this .state.heading}</h1>;
}
}
|
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output:
output
Reference: https://reactjs.org/docs/react-component.html#componentdidcatch
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...