boom
boom

Reputation: 11686

How does mobx prevent rerender children of observable components?

I've found mobx observable component only rerender themselves and not their children. How is this achieved?

Upvotes: 4

Views: 2666

Answers (1)

AmitBu
AmitBu

Reputation: 137

From the MobX documentation:

MobX reacts to any an existing observable property that is read during the execution of a tracked function.

By using @observer over a component MobX will track and react to changes occurred to observables defined inside the render function of this component. Each child component should be wrapped with @observer if you wish it to react to changes.


Edited:

By using observer over a component, MobX will override the shouldComponentUpdate by telling the component to update only when necessary (observables change or shallow props change).

From MobX @observer documentation:

observer also prevents re-renderings when the props of the component have only shallowly changed, which makes a lot of sense if the data passed into the component is reactive. This behavior is similar to React PureRender mixin, except that state changes are still always processed. If a component provides its own shouldComponentUpdate, that one takes precedence.See for an explanation this github issue

Upvotes: 1

Related Questions