Show HN: Easy State: simplified state management for React (learn in a minute)

Structure wise: Having a singleton app store and separate component states together is the best pattern. Hidden details of a component's functionality should go into its own state. App level data (like the current user) should go into the single app state. Also the minimal set of state that defines the other part of the app state (typically state props from user input) should be two-way reflected in the URL or local storage - depending if its a shareable state detail or user preference.

Timing wise: Synchronous view updates (MobX approach) cost too much performance wise. It is often also not in align with the natural expectation of the developer. (Even MobX has actions, which is just async execution with a bit more granularity). React's approach is a bit too lazy for my taste. Updating the state asynchronously leads to confusion and has no benefit in my opinion. Synchronous state update has practically zero performance cost compared to view updates. Updating the state synchronously and the view asynchronously - but always before the next paint - seems to be the best approach for me. You will never extract existing state from your view and from the user's perspective the only important thing is to have it updated before it is rendered.

Data management wise: I think it is super important for a reactivity library to do not save or alter any of your state. It should just save reactions paired with data mutation/access points. Saving data can cause staleness and mutating your data behind your back is just a mess. I was super careful to leave you objects untouched (opposed to array hacks, hidden getters/setters and memoizing your own getters/setters (computed values)).

In the end Easy State is most similar to MobX. It just saves reactions (renders), which it triggers on state/store mutations. The biggest difference is in its timing (async vs sync), minimal syntax and (in my opinion) fewer edge cases. The difference between using the state vs an external store is pretty much a one line change. They are both normal observable objects, they are just in different locations with different names.

Sorry for the long answer. No worries if you don't have time to read it (:

Edit: I also dislike 3rd party injection libraries (like the MobX @inject decorator). Simple ES6 imports should be enough for injecting the single app state and props should be enough to pass down a component's own state. Angular is a prime example of how more complex injection systems can go wrong. This is just my opinion though and it even might change in the future (: