Hacker News Reader

Comment by sbergot | Hacker News Reader

I have come mostly to the same conclusion. UI specific state (eg a flag to store whether the left panel is folded) should be as local as possible.

When you have some functional data (the lisk of tasks in a todo app) then putting that in the React context and injecting it in the UI blocks that need it is the simplest way as long the injection part is well separated (using something like unstated.next).

There is some grey area between the two but with this methodology I have never felt the need to use redux or mobx again.

The last time I had to use mobx I was bitten by the rough edges of the decorators.

View on HN

UI specific state (eg a flag to store whether the left panel is folded) should be as local as possible

MobX is not a replacement for local state. It's a useful mechanism for sharing state between parts of an app that need to share state - in the example of a left panel, if you want to be able to control that from outside of the component then you either need to be able to modify the state (eg MobX), or you need a callback that refers to the local panel state that's callable from outside (eg a Redux action), or you need a method that's passed around the app to where it's needed (eg a React context). If you don't need to control it from outside then you don't need any of these things and useState is fine.

Where MobX is especially useful is in things that aren't simply an observable value that need to be passed around - if you need to transform the value for other components to use it then MobX's @computed and @action are both _incredibly_ helpful.

In my opinion, the sharing of state in the manner you described leads to implicit coupling between components, which can be hard to hold in your head as the application grows.

I would always forget to put the observable decorator, then wonder why there was not a re-render. This situation occurred so many times I lost count. It's not mobx, it's me that is the problem.

Maybe you'll like this update then -- check out `makeAutoObservable`, it automatically picks sensible defaults to make observable

Reply on news.ycombinator.com