Confused about when to apply observer in React

[PieterBoeren]

I'm a bit confused on when to apply observer for a React component, the documentation states:

apply observer to all components that read observable data.

which I interpret as "components which don't read observable data, shouldn't be wrapped" (and is working fine).

However the next paragraph states:

usually all your components should be wrapped by observer

and the ESLint plugin for MobX gives warning for this.

Should every component be wrapped with observer, or only the ones which really read observable data (and thus basically turn off the ESLint rule)?

[kubk]

The ESLint rule is just a recommendation, it is not mandatory. Wrapping all the components with observer can save you time debugging if you forget to wrap a component that reads observable data.

[kubk]

@urugator It is a good option, but unfortunately it has its disadvantages. Examples:

This one gives a warning with observableRequiresReaction turned on:

const Component = observer(() => {
  const [counter] = useState(createCounterStore)
  
  ...
  
  <Button onClick={() => counter.increment()}>Increment</Button>
})

A fix is to access the method inside observer

const Component = observer(() => {
  const [counter] = useState(createCounterStore)
  const { increment } = counter
  
  ...
  
  <Button onClick={() => increment()}>Increment</Button>
})

Also in my practice it's often needed to access observables / computeds outside reactions. For example in Axios interceptor to logout a user when JWT expired

[urugator]

This one gives a warning

This shouldn't happen if you explicitely annotate increment with action.
Alternatively: onClick={action(() => counter.increment())}

access observables / computeds outside reactions

Again, should be wrapped in action/runInAction ...

[kubk]

@urugator Does makeAutoObservable explicitly annotate methods as actions? Because here Mobx still warns: https://codesandbox.io/s/xenodochial-cloud-2slby9?file=/index.js

UPD: It doesn't warn in older versions (for example in mobx 6.1.4)

[urugator]

No. makeAutoObservable uses autoAction. But it also makes the field observable (unless it's defined on prototype) since 6.2:
#2842
makeAutoObservable doesn't know if the function is intended for state mutation or as a helper for some derivation or if it's "stateful" (can be replaced by other function), so it does it's best to work in all of these situations.

[kubk]

@urugator Thanks for explanation! 👍