How to update props dependent state

Question

I have component connected to redux store which gets data from props:

const mapStateToProps = state => ({rowData: dataSelector(state)})

The component has its own state:

this.state = {
  rowsPerPage: 23,
  pageCount: 0,
}

I need to calculate new state.pageCount when props.rowData changes. How can i do it?

*'... when `props.rowData` changes'* can you explain in a bit more details what exactly changes your component's props? if it causes re-render somehow, you may use second (optional) parameter of [`mapStateToProps()`](https://react-redux.js.org/using-react-redux/connect-mapstate#connect-extracting-data-with-mapstatetoprops), which is your component's `ownProps` — Yevhen Horbunkov, Jan 16 '20 at 16:35
@YevgenGorbunkov, props.rowData i get with selector. Every time when i change filter option i extract new props.rowData and when i get new value i need to update state.pageCount — Дядя Фея, Jan 16 '20 at 16:39
I'm guessing there's a slight mix-up in the way you pass your data back and forth. Would you share wider code context of your component wrapping up this feature? — Yevhen Horbunkov, Jan 16 '20 at 16:48
Unfortunately I can’t show the code, besides, I don’t see any mix-up, the data flow from the redux-storage to the component is direct: components gets props and calculates new state on it. — Дядя Фея, Jan 16 '20 at 17:13
You're most welcome, however, based on your initial comment, I'm still pretty sure there's something suboptimal in the way you pass state variables and props back and forth and, most probably, you could avoid certain complexities which you compound even further with your current path. — Yevhen Horbunkov, Jan 16 '20 at 17:29
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/206085/discussion-between---and-yevgen-gorbunkov). — Дядя Фея, Jan 16 '20 at 17:32

Nikhil Goyal · Accepted Answer · 2020-01-16T16:50:29.410

1

You can use getSnapshotBeforeUpdate to determine when the props.rowData changes by using an if condition. Based on when the value is changed, you can update your state.pageCount like the way you want.

edited Jan 16 '20 at 16:50

answered Jan 16 '20 at 16:18

Nikhil Goyal

1,945
1
9
17

How can i use prevProps in getDerivedStateFromProps? – Дядя Фея Jan 16 '20 at 16:35
`this.props` will give the previous props but the first argument of the method `getDerivedStateFromProps` will give the new updating props. – Nikhil Goyal Jan 16 '20 at 16:36
I can't use 'this.props', getting error: "Cannot read property 'props' of undefined" – Дядя Фея Jan 16 '20 at 16:44
Try using `getSnapshotBeforeUpdate` – Nikhil Goyal Jan 16 '20 at 16:50

score 0 · Answer 2 · answered Jan 16 '20 at 16:19

0

Please create componentWillReceiveProps

componentWillReceiveProps(newProps) {
if(newProps.rowData.length !== this.state.pageCount) {this.setState({pageCount: newProps.rowData.length})}
}

answered Jan 16 '20 at 16:19

JLD

570
2
6

1

`componentWillReceiveProps` is [deprecated](https://reactjs.org/docs/react-component.html#unsafe_componentwillreceiveprops). – Brian Thompson Jan 16 '20 at 16:23
Do you use React hooks? (React v > 16.8?) – JLD Jan 16 '20 at 17:06
The use of hooks is kind of irrelevant. Unless the question specifies, you should assume they are using a recent version. I'm not saying your answer won't work, I'm just pointing out and recommending that proposed solutions shouldn't use deprecated methods. – Brian Thompson Jan 16 '20 at 17:12
you can use UNSAFE_componentWillReceiveProps – JLD Jan 16 '20 at 17:55
*Can*, but **should not**. Direct from the react docs regarding this method: "These methods are considered legacy and you should avoid them in new code". The point isn't that it won't work, its that you should not use it. – Brian Thompson Jan 16 '20 at 18:03

How to update props dependent state

2 Answers2