Take an action on props change in ReactJS

Question

I need to use current props and previous props value in my React component. So i did it like this

state = {
    current: null,
    previous: null,
};

componentWillReceiveProps(nextProps) {
    if (nextProps.amount !== this.state.current) {
        this.setState({previous: this.state.current, current: nextProps.amount});
    }
}

...

render() {
    const {previous, current} = this.state;

    return (
        ...
        <CountUp className="counter" start={previous} end={current} duration={1}/>
        ...
    )
}

It works fine, but is it good React practise to do it like this? Are there others "good" ways to do it?

`setState(prevState)` is provided by React along with `props` both of which are optional. — izengod, Feb 28 '18 at 09:58

score 7 · Accepted Answer · answered Feb 28 '18 at 10:07

As of v16.2.0, componentWillReceiveProps is the right place to update state, based on prop changes and since you want to use both current state and previous state in render, you need to maintain, two different state variables as you are doing

However, when you update the state based on previous state, use functional setState method

Check this answer for more details

When to use functional setState

componentWillReceiveProps(nextProps) {
    if (nextProps.amount !== this.state.current) {
        this.setState(prevState => ({ previous: prevState.current, current: nextProps.amount }));
    }
}

According to the latest RFC to React

State derived from props/state

The purpose of this pattern is to calculate some values derived from props for use during render.

Typically componentWillReceiveProps is used for this, although if the calculation is fast enough it could just be done in render.:

From v16.3.0 onwards, you would make use of

static getDerivedStateFromProps(nextProps, prevState) {
    if (
      !prevState ||
      prevState.current !== nextProps.amount
    ) {
      return {
        previous: prevState.current,
        current: nextProps.amount
      };
    }
}

For anyone reading this in 2019, check my [updated answer](https://stackoverflow.com/a/57225150/4119678). It is not recommended to use `componentWillReceiveProps` — afryingpan, Jul 26 '19 at 18:13
@afryingpan your answer is not correct, it is best to use getDerivedStateFromProps — Ojasvi Monga, Jun 26 '20 at 10:22

afryingpan · Answer 2 · 2020-05-12T04:00:47.773

I'd like to update this answer for anyone else who comes here from Google. As of v16.8.6, componentWillReceiveProps has been marked as legacy, and is not recommended to use. Instead you should use componentDidUpdate and update your state based on the new props and previous props/previous state.

componentDidUpdate(prevProps, prevState) {
   if (this.props.someVal !== prevState.someVal) {
     this.setState({ previous: prevState.someVal, current: this.props.someVal });
   }
}

Obviously, whether you check the previous state or the previous props is up to your discretion/situation. You can implement componentDidUpdate with or without the parameters, but if you want prevState you must declare prevProps.

React Update Lifecycle

componentDidUpdate()

score 2 · Answer 3 · answered Feb 28 '18 at 09:57

2

You can use an arrow function in your setState object. Like this :

this.setState((prevState) => {
      return { yourState: prevState.yourState }
    })

prevState is a default name but you can replace the name as you want

answered Feb 28 '18 at 09:57

KolaCaine

2,037
5
19
31

Take an action on props change in ReactJS

3 Answers3

Linked