Open In App

ReactJS getDerivedStateFromError() Method

Last Updated : 16 Oct, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

The getDerivedStateFromError() 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 render phase, so side-effects are not permitted in this method. For side-effects, use componentDidCatch() instead. 

Syntax:

static getDerivedStateFromError(error)

Parameters: It accepts the error that was thrown as a parameter.

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

Example: Program to demonstrate the use of getDerivedStateFromError() method.

Project Structure: It will look like the following. 
 

 

Filename: App.js

Javascript




import React, { Component } from 'react';
 
export default class App extends Component {
 
  // Initializing the state
  state = {
    error: false
  };
 
  static getDerivedStateFromError(error) {
    // Changing the state to true if some error occurs
    return {
      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:

 

Reference: https://reactjs.org/docs/react-component.html#static-getderivedstatefromerror


Similar Reads

ReactJS shouldComponentUpdate() Method
The shouldComponentUpdate method allows us to exit the complex react update life cycle to avoid calling it again and again on every re-render. It only updates the component if the props passed to it changes. The shouldComponentUpdate method is majorly used for optimizing the performance and to increase the responsiveness of the website but do not r
3 min read
ReactJS componentDidMount() Method
The componentDidMount() method allows us to execute the React code when the component is already placed in the DOM (Document Object Model). This method is called during the Mounting phase of the React Life-cycle i.e after the component is rendered. All the AJAX requests and the DOM or state updation should be coded in the componentDidMount() method
2 min read
ReactJS getSnapshotBeforeUpdate() Method
The getSnapshotBeforeUpdate() method is invoked just before the DOM is being rendered. It is used to store the previous values of the state after the DOM is updated. Any value returned by getSnapshotBeforeUpdate() method will be used as a parameter for componentDidUpdate() method. This function is always used along with the componentDidUpdate() met
2 min read
ReactJS bind() Method
The bind() is an inbuilt method in React that is used to pass the data as an argument to the function of a class based component. Syntax: this.function.bind(this,[arg1...]);Parameter: It accepts two parameters, the first parameter is the this keyword used for binding and the second parameter is the sequence of arguments that are passed as a paramet
2 min read
ReactJS componentWillUnmount() Method
The componentWillUnmount() method allows us to execute the React code when the component gets destroyed or unmounted from the DOM (Document Object Model). This method is called during the Unmounting phase of the React Life-cycle i.e before the component gets unmounted. All the cleanups such as invalidating timers, canceling network requests, or cle
2 min read
ReactJS componentDidUpdate() Method
The componentDidUpdate() method allows us to execute the React code when the component is updated. All the network requests that are to be made when the props passed to the component changes are coded here. The componentDidUpdate()is called after componentDidMount() and can be useful to perform some action when the state of the component changes. S
2 min read
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() which was called during the render phase, side-effe
2 min read
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 the render() method of the component skipping the sh
2 min read
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 of State or Props and just before the execution o
3 min read
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 synchronously which causes our component to render
3 min read
Article Tags :