I'm an avid user of mobx and yes, this is similar, but no where near as powerful, and much less magical. For example, in no particular order:
* mobx is smart enough to know when only one property of a complex object has changed and that that component depends only on that property. So you can have complex state objects, and if your component only uses property X of said object, it only re-renders if X changes but not Y.
* mobx allows you to compose observables - any observable can reference the value of any other observable and if that second observable changes, the listeners for the first observable will re-render, etc. This means state can depend on other state, and everything updates correctly. For example, if you have a store that fetches profile data for the auth user, and the auth user id changes due to login or logout, the profile data store can trigger a refetch, all this happening outside the react component tree, then finally the correct components re-render.
* mobx works on it own and is agnostic to framework (react/vue/etc) and is integrated via binding libraries for each framework.
* mobx provides quite a few different kinds of observables with different behaviors (shallow maps, lists, etc)
* mobx allows you to declare arbitrary reactions that run automatically when state changes, whereas this library here really just re-renders components when state changes.
* With mobx you don't even have to say which things in your component use observables - you just wrap your component in observer(), and any time it references an observable, mobx tracks it and will re-render the component if the observable changes. Whereas here you need explicitly hooks for each state atom.
There are many more differences, in every case mobx does more. So mobx is a far more complex and powerful system, whereas this is a simpler system that extends useState() hooks with objects that live outside the component. Which is not a value judgement, use the simplest tool that meets your needs.
yetanotherjosh|4 years ago
* mobx is smart enough to know when only one property of a complex object has changed and that that component depends only on that property. So you can have complex state objects, and if your component only uses property X of said object, it only re-renders if X changes but not Y.
* mobx allows you to compose observables - any observable can reference the value of any other observable and if that second observable changes, the listeners for the first observable will re-render, etc. This means state can depend on other state, and everything updates correctly. For example, if you have a store that fetches profile data for the auth user, and the auth user id changes due to login or logout, the profile data store can trigger a refetch, all this happening outside the react component tree, then finally the correct components re-render.
* mobx works on it own and is agnostic to framework (react/vue/etc) and is integrated via binding libraries for each framework.
* mobx provides quite a few different kinds of observables with different behaviors (shallow maps, lists, etc)
* mobx allows you to declare arbitrary reactions that run automatically when state changes, whereas this library here really just re-renders components when state changes.
* With mobx you don't even have to say which things in your component use observables - you just wrap your component in observer(), and any time it references an observable, mobx tracks it and will re-render the component if the observable changes. Whereas here you need explicitly hooks for each state atom.
There are many more differences, in every case mobx does more. So mobx is a far more complex and powerful system, whereas this is a simpler system that extends useState() hooks with objects that live outside the component. Which is not a value judgement, use the simplest tool that meets your needs.
FlashBlaze|4 years ago