loading...
Cover image for The only state management solution that uses React hooks

The only state management solution that uses React hooks

adamklein profile image adam klein ・2 min read

As of today, we have 2 different ways of managing state and side-effects in React:

  1. For local state and side-effects we use hooks *
  2. 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

ReusableJS Logo

*** 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.

Posted on by:

adamklein profile

adam klein

@adamklein

I'm a web developer and consultant, web GDE, and author of open source libraries. I co-founded 500Tech, a company that specializes in frontend technologies. I love coding, and love speaking about code

Discussion

markdown guide
 

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.