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
– izengod, Commented Feb 28, 2018 at 9:58

Shubham Khatri · Accepted Answer · 2018-02-28 10:07:25Z

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. It is not recommended to use componentWillReceiveProps
@afryingpan your answer is not correct, it is best to use getDerivedStateFromProps

afryingpan · Accepted Answer · 2020-05-12 04:00:47Z

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()

KolaCaine · Accepted Answer · 2018-02-28 09:57:08Z

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

Collectives™ on Stack Overflow

Take an action on props change in ReactJS

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related