Mobx.dart: [Question] Observer best practice

[JCKodel]

Use case: a page with 6 tabs, each tab controlled by one store, the home page (where tab is) controlled by authentication store.

The entire home page is replaced by login page when authentication store changes. Each tab shows different widgets, depending on the store's state (or updates a list of items).

What is the best practice? One Observer to rule them all or many Observer near each reactive point?

What are the performance implications, if any?

[pavanpodila]

I think you should keep an Observer per tab instance. It is the most performant approach. When say Tab1 changes, there is no reason for Tab2 to change. If the Observer is common for all tabs, there will be unnecessary renders of the tabs that haven't changed.

[hramnathnayak]

@pavanpodila I have been using @observer per field assuming that was the most performant thing to do... Obviously having one @oberver per screen that cover a group of field is easier to implement... Do you recommend I switch over to having one observer per page?

[pavanpodila]

The way to think about the use of Observer is to treat it as a reactive piece of UI. Whenever the underlying data changes, it should rebuild the UI where it's used. These updates should be as granular as possible for maximum performance. The key is to not rebuild unnecessarily.