Skip to content
Related Articles

Related Articles

React.js static getDerivedStateFromProps()

View Discussion
Improve Article
Save Article
  • Last Updated : 12 Mar, 2021

The getDerivedStateFromProps() method is used when the state of a component depends on changes of props.

getDerivedStateFromProps(props, state) is a static method that is called just before render() method in both mounting and updating phase in React. It takes updated props and the current state as arguments.

We have to return an object to update state or null to indicate that nothing has changed.

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. foldername, move to it using the following command:

    cd foldername

Project Structure: It will look like the following.


import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component {
  render() {
    return (
      <Child name = "sachin"></Child>
class Child extends React.Component{
        this.state = {
        name: "kapil"
    static getDerivedStateFromProps(props, state) {
        if( !=={
            //Change in props
        return null; // No change to state
    /* if props changes then after getDerivedStateFromProps
       method, state will look something like 
       return (
        <div> My name is { }</div>
export default App;

If props changes, then the state will also change accordingly else, getDerivedStateFromProps will return null that indicates no change in state. In the above example props have a property called name but the state has that property with a different value. so the state will change according to the value of props property.



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!