As of today, we have 2 different ways of managing state and side-effects in React:
- For local state and side-effects we use hooks *
- For global state and side-effects, we use a library such as Redux or MobX **
* or this.state / lifecycle methods for class components.
** or React context, which has its drawbacks as a state management solution
The main problem is that we are forced to manage local and global state differently. Moreover, we move local state to global state quite often, and the migration costs us precious development hours.
This also means that we don't benefit from the reusability of hooks, and we can't enjoy our custom hooks in global state management.
ReusableJS
ReusableJS is the only global state management solution that uses native React hooks ***
Sure, you can use hooks to connect to Redux or MobX stores, but inside the stores you manage state, side-effects and computed values with a different mechanism.
ReusableJS allows you to manage your global state using native React hooks. It does so by wrapping each global store in a dummy component that executes the hooks, and allows you to subscribe directly to these stores, and use memoized selectors.
This will allow you to manage global state the same way you manage local state, while maintaining high performance, and decoupling your state management from the component tree.
To learn more about how to use ReusableJS, checkout the Repo:
https://github.com/reusablejs/reusable
*** If you know of another library that allow you to manage global state using native React hooks, please let me know. I haven't encountered one after doing a pretty extensive research.
Top comments (2)
I recently heard about this:
github.com/react-spring/zustand
Also, Syntax FM just had an episode covering a lot of the options for handling React State:
syntax.fm/show/272/react-state-rou...
Well I dindt know about ReusableJS(looks pretty well) , but I recently read about Recoil , I think you should give it a try, its look pretty amazing too.