Skip to content
Advertisement

MobX – Why should I use `observer` when I could use `inject` when injecting data into a React component

MobX documentation suggests I should use observer on all my components. However by using inject I get more fine grained control over what data causes a re-rendering of my components.

My understanding is I that with observer, a change in all accessed observables in the last render will cause a re-render, even if the observable is nested deep in the data store, while inject only re-renders when observables accessed in the injector function change.

For example:

JavaScript

Could someone confirm my understanding of this?

In my opinion, it’s better to use only inject as it gives you more control, and can prevent unnecessary re-renders. If the data is deeply nested you could create a computed property that gets and prepares the data from the deep structure and then inject that property in the component.

Are there other benefits/drawbacks when using one over the other

Advertisement

Answer

I believe you are correct in your assessment. Let me try to rephrase for clarity:

@observer tracks which observables are used by render and automatically re-renders the component when one of these values changes.

We should note that @observable values used by render might be deeply nested within a given prop, per your example:

JavaScript

with observer, a change in all accessed observables in the last render will cause a re-render, even if the observable is nested deep in the data store

Bingo!

Although there’s a quirk with observable, as you’ll see in a moment…


On the other hand you have @inject which makes available to a component (via props) specific data structures defined by a Provider.

For example:

JavaScript

inject only re-renders when observables accessed in the injector function change.

Bingo!

inject will only spawn a re-render if the prop itself has recognized changes.


This is effectively the same issue with shouldComponentUpdate() and a deep-comparison of props — though observer seems to be far more efficient than shouldComponentUpdate.

In my opinion, it’s better to use only inject as it gives you more control, and can prevent unnecessary re-renders.

I wouldn’t necessarily go that far… it all depends on how you have your code structured.

If I modify your original example as so:

JavaScript

…the addition of deepData won’t actually get picked up as an observable change (i.e. re-render) because that property didn’t exist when we originally tagged data as an observable value. So that’s one problem.

A different approach could be to do something like this:

JavaScript

This allows you to spread the observable values out across classes — so you might still want to inject Store into a component (to access Store.data but ultimately any observable changes come from updating Person.

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement