DEV Community

Cover image for The only state management solution that uses React hooks
adam klein
adam klein

Posted on

1

The only state management solution that uses React hooks

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (2)

Collapse
 
hamatoyogi profile image
Yoav Ganbar •

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

Collapse
 
joskr2 profile image
Josue Retamozo Vargas •

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.

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video