Why use getDerivedStateFromProps instead of componentDidUpdate?

Question

As read in this React Github issue I see more and more that

the cost of render() is relatively small

In React 16.3, I'm wondering why one would use the new getDerivedStateFromProps instead of componentDidUpdate?

Imagine this example:

getDerivedStateFromProps(nextProps, prevState) {   if (!prevState.isModalOpen && nextProps.isReady) {        return { isModalOpen: true };   } } 

versus

componentDidUpdate(prevProps, prevState) {   if (!prevState.isModalOpen && this.props.isReady) {         this.setState({ isModalOpen: true });   } } 

The later seems simpler just because it's using only existing API and looks just like what we used to do in componentWillReceiveProps so I don't see why users would go for getDerivedStateFromProps? What's the benefit?

Thanks!

Answer 1

So Dan Abramov answered on Twitter and it seems like there are 2 reasons why you should use getDerivedStateFromProps instead of componentDidUpdate + setState:

setState in componentDidUpdate causes an extra render (not directly perceptible to user but it slows down your app). And you render method can’t assume the state is ready (because it won’t be the first time).

• Performances reason: it avoids unnecessary re-render.
• As getDerivedStateFromProps is called before rendering on init, you can initialise your state in this function instead of having a constructor to do so. Currently you had to have a constructor or componentWillMount to init your state before initial rendering.