To some people comparing mobx to react saying that "i just ditched mobx because react does the same thing" I don't believe this is true. Apart from the seperation-of-concerns benefit mobx is different in the sense that it works with observables whereas react works with diffing tree branches.
In other words react needs to work with DOM diffing and virtual dom whereas mobx and observables are granular & directly manipulate the values.
This gives mobx in my opinion lots of benefits that are not so apparent in react. Mainly the benefit of performance where a computed property only reruns if any of its dependencies change whereas react updates when any of its props change, even if the prop wasn't used!
A simple example is imagine in react:
props => if (props.a) bar() else if (props.b) baz()
React doesn't care about a nor b and reruns this code whenever props changes.
In mobx (and other observable based systems) if the above computed function runs with prop.a equal to true will make mobx know that "a" needs to be tracked and mobx doesn't yet know about "b" (because that branch has never been evaluated) hence doesn't rerun if b changes.
This kind of reactive granularity is what sets the two apart imho.
solidjs [1] is a framework that works like mobx but for components; hence seems to be the best combination of mobx + react using observables (without virtual dom diffing)
In other words react needs to work with DOM diffing and virtual dom whereas mobx and observables are granular & directly manipulate the values.
This gives mobx in my opinion lots of benefits that are not so apparent in react. Mainly the benefit of performance where a computed property only reruns if any of its dependencies change whereas react updates when any of its props change, even if the prop wasn't used!
A simple example is imagine in react:
props => if (props.a) bar() else if (props.b) baz()
React doesn't care about a nor b and reruns this code whenever props changes.
In mobx (and other observable based systems) if the above computed function runs with prop.a equal to true will make mobx know that "a" needs to be tracked and mobx doesn't yet know about "b" (because that branch has never been evaluated) hence doesn't rerun if b changes.
This kind of reactive granularity is what sets the two apart imho.
solidjs [1] is a framework that works like mobx but for components; hence seems to be the best combination of mobx + react using observables (without virtual dom diffing)
1. https://github.com/ryansolid/solid