Observable and action usage within component about mobx-contacts-list HOT 2 CLOSED

Good question, I'm gonna blog about this soon, so here is the TL;DR. We used to use setState indeed for local component state but discovered that it gives more issues than using @observable.

Too name a few:

1. setState is asynchronous. If you call setState and after that call some other functions, they are still looking at the old state. I have seen leading this to very subtle things in the past
2. setState makes it appear that all component state is captured in the state field. But in practice this doesn't uphold always, as any setState call triggers a re-render, while sometimes there is local state that doesn't influence rendering,

Using @observable fixes both this issues and has the nice upside that the component code becomes a lot more concises this.a = b instead of this.setState({ a: b }). And since local component state is now uniform with how you would use stores in MobX, it becomes way easier to factor local component state out when needed.

from mobx-contacts-list.

It makes sense and I would add (as a 3rd point) that doing so also ease debugging (with mobx 2.2 and the new @action decorator).

Thank you for your quick answer and your great lib.

from mobx-contacts-list.