Reintroducing React: V16 and Beyond/

...

/

Method 1: static getDerivedStateFromProps

Method 1: static getDerivedStateFromProps

In this lesson, we'll discuss a React lifecycle method in which we use state and render objects according to our example's requirement.

We'll cover the following...

Before explaining how this lifecycle method works, let me show you how the method is used.

The basic structure looks like this:

Press + to interact
const MyComponent extends React.Component { 
  
  static getDerivedStateFromProps() { 
    //do stuff here 
  } 
}

The method takes in props and state:

Press + to interact
static getDerivedStateFromProps(props, state) { 
    //do stuff here 
}

And you can either return an object to update the state of the component:

Press + to interact
static getDerivedStateFromProps(props, state) { 
  
  return { 
    points: 200 // update state with this 
  } 
}

Or return null to make no updates:

Press + to interact
static getDerivedStateFromProps (props, state) { 
    return null;
}

I know what you’re thinking. Why exactly is this lifecycle method important?

Well, it is one of the rarely used lifecycle methods, but it comes in handy in certain ...