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

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