PureComponent decorated by mobx-react throws error about `shouldComponentUpdate` presence

Question

In console I see this warning:

index.js:2178 Warning: Body has a method called shouldComponentUpdate(). shouldComponentUpdate should not be used when extending React.PureComponent. Please extend React.Component if shouldComponentUpdate is used.

Body component is using

...
import { observer, inject } from 'mobx-react';
...
@inject('store')
@observer
class Body extends React.PureComponent<BodyProps> {
...

but doesn't have this shouldComponentUpdate method anywhere.

Is this coming from mobx-react? Can I use PureComponent in components decorated by @observable or @inject ?

Cohbath

Answer 1

PureComponents should not be used in combination with observer. Conceptually it is strange as observer makes components impure; as they can update without prop changes (which is actually the whole point of observer).

The upcoming mobx-react version will warn about this :)

Sturgeon

So this observer puts shouldComponentUpdate in the code? – Cohbath

Observer, observable -> when a property changes, call forceUpdate( ). This bypasses shouldComponentUpdate( ), which can still be used to skip re-rendering when props change. I don't understand why mobx is doing this. – Percent

@Sturgeon The readme of the mobx-react recommends to extend React.PureComponent (Link below). I followed these recommendation and run into this error. github.com/mobxjs/mobx/tree/main/packages/… – Leigha