React/Mobx - component is re-rendering, but componentWillReceiveProps() is not being called

Question

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?

Answer 1

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.