I have React/Mobx app. When I am making changes in the store, the component is updating (re-rendering), but I need to make some comparisons for adding some more functionality, so I want to use componentWillReceiveProps(nextProps) and compare nextProps with this.props. Somehow it is not being called. Any idea, what I am doing wrong, or what else I can do, for getting that?
Asked
Active
Viewed 1,465 times
6
-
paste your code here, please – Yuri Pereira Aug 19 '17 at 20:14
-
Look at this: https://github.com/mobxjs/mobx-react/issues/281 – robertklep Aug 19 '17 at 20:18
-
2And specifically on the **urugator** explanation. https://github.com/mobxjs/mobx-react/issues/281#issuecomment-309410018 – felixmosh Aug 19 '17 at 20:20
-
Do you want to do some check on all `props` or just check if e.g. `props.value` has changed? – Tholle Aug 26 '17 at 20:02
1 Answers
3
tl;dr: use componentWillUpdate and componentDidUpdate
The object Store passed as a prop never changes, even when its content changes. The trick of using @observable is that it will trigger the update in the component without changing the props. So using lifecycle functions such as shouldComponentUpdate, componentWillReceiveProps and componentDidReceiveProps won't work with since they are triggered when either the component's props or state changes. The mobx doc explains it well in the shouldComponentUpdate section.
So, to catch an update in an observable, we must go a bit deeper in the lifecycle stack and use componentWillUpdate and componentDidUpdate.
Christopher Chiche
- 15,075
- 9
- 59
- 98
-
1`componentWillUpdate` and `componentDidUpdate` will fire but i think you will still not be able to compare with `prev props` due to the fact props didn't actually changed through lifecycle methods. – Ori Price Aug 24 '19 at 19:35