ReactJS componentDidUpdate() Method

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 {
  // Initializing the state
  state = {
    error: false,
  };
 
  componentDidCatch(error) {
    // Changing the state to true 
    // if some error occurs
    this.setState({
      error: true
    });
  }
 
  render() {
    return (
      <React.StrictMode>
        <div>
          {this.state.error ? <div>Some error</div> : <GFGComponent />}
        </div>
      </React.StrictMode>
    );
  }
}
 
class GFGComponent extends Component {
 
  // GFGComponent throws error as state of 
  // GFGCompnonent is not defined
   
  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

ReactJS componentDidUpdate() Method

GeeksforGeeks

News

Improve

Article Tags :

Similar Reads

ReactJS componentDidCatch() Method

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() w

ReactJS componentDidUpdate() Method

In React, lifecycle methods allow you to manage the behaviour of components at different stages of their existence. One important lifecycle method for handling actions after updates have occurred is componentDidUpdate(). This method is called immediately after a componentâ€™s updates are applied to th

ReactJS componentDidMount() Method

In React, lifecycle methods allow you to manage the behaviour of components at different stages of their existence. One important lifecycle method for initializing data or setting up resources after a component is mounted is componentDidMount(). In this article, we'll explore the componentDidMount()

ReactJS isDOMComponent() Method

React.js library is all about splitting the app into several components. Each Component has its own lifecycle. React provides us some in-built methods that we can override at particular stages in the life-cycle of the component. In this article, we will know how to use isDOMComponent() method. This

ReactJS UNSAFE_componentWillUpdate() Method

The componentWillUpdate() method provides us the control to manipulate our React component just before it receives new props or state values. It is called just before the rendering of our component during the updating phase of the React Life-cycle ,i.e., this method gets triggered after the updation

ReactJS UNSAFE_componentWillMount() Method

The componentWillMount() method invokes right before our React component gets loaded or mounted in the DOM (Document Object Model). It is called during the mounting phase of the React Life-cycle, i.e., before render(). It is used to fetch data from outside the component by executing the React code s

ReactJS isCompositeComponent() Method

React.js library is all about splitting the app into several components. Each Component has its own lifecycle. React provides us some in-built methods that we can override at particular stages in the life-cycle of the component. In this article, we will see how to use isCompositeComponent() method.

ReactJS isCompositeComponentWithType() Method

React.js library is all about splitting the app into several components. Each Component has its own lifecycle. React provides us some in-built methods that we can override at particular stages in the life-cycle of the component. In this article, we will know how to use isCompositeComponentWithType()

ReactJS Pure Components

Generally, In ReactJS, we use the shouldComponentUpdate() Lifecycle method to customize the default behavior and implement it when the React component should re-render or update itself. When working with React pure components, we can utilize their behavior to optimize behavior as pure components aut

ReactJS forceUpdate() Method

The components in React will re-render only if the state of the component or the props passed to it changes but if we need to re-render the component if some data changes then we will use forceUpdate() method of React. Calling the forceUpdate() will forcibly re-render the component and thus calls th