React State Management in 2022

source: twitter
  • UI State —the state of the application a.k.a. toggles, modals, settings
  • Form State — the different states of a form (disabled, validating, validated, onBlur validation, onSubmit validation, loading, submitting etc…)
  • Server Cache State — the state from the server, which is cached client-side
  • URL State — the state managed by your browser (filtering, querying etc)
programmer being excited because he has to replace the state management tool for the 5th time this month
programmer being excited for replacing the state management tool for the 5th time this month (source: shuttershock)

Redux

It appeared in June 2015 as a way to resolve the state management part of an application. Their vision is having a centralized state on the whole application which is easy to debug (thanks to their Redux DevTools).

Mobx

The idea of Mobx was that you could have multiple smaller stores. It works by using proxies to make arrays and plain objects observable.

Context

Context is React’s way of managing state in version 16.3.

Hooks

This one changed the game. I won’t get in the nitty gritty, but it’s one of the easiest ways to have state in your app. Just create a function, put some state in it, throw an useEffect and voila.

Zustand

Out of this list, this is my favorite one and the one I usually install in all frontend projects. Zustand is a simple, lightweight, fast, and React hooks based state management.

Jotai/Recoil

Unfortunately, I didn’t get to work with those as much as I wanted. I tried to read the documentation multiple times and see why it would be better than react-query and zustand, and why I NEED it in my projects, but couldn’t find a reason.

  • Minimalistic API
  • No string keys
  • TypeScript oriented

Conclusion

I hope you learned something today! React is the biggest framework for frontend ( yes, framework, I said it!) and so many developers poured their hearts and souls into it and I’m pretty happy with the current way to code.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Pitis Radu

Pitis Radu

Privacy advocate, writer of open-source software, entrepreneur. I work on challenging projects and I enjoy writing about them.