DEV Community

Cover image for State Management Battle in React 2021: Hooks, Redux, and Recoil

State Management Battle in React 2021: Hooks, Redux, and Recoil

Mihaela on April 13, 2021

Introduction: Over the years, the massive growth of React.JS has given birth to different state management libraries, amongst other thin...
Collapse
 
ivan_jrmc profile image
Ivan Jeremic

Recoil is the only one that does the job without boilerplate, if you still use redux I'm very sad for you.

Collapse
 
mrvaa5eiym profile image
mrVAa5eiym

redux have very little boilerplate these days too

Collapse
 
ivan_jrmc profile image
Ivan Jeremic • Edited

Still too much

Collapse
 
avkonst profile image
Andrey

You probably have not seen Hookstate. It is even better on this aspect.

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

Thanks for the suggestion I will look into hookstate I think I will like it.

Collapse
 
yusr profile image
yusr.dhm

i'm agree with you, hookstate is easy and faster

Collapse
 
amaben2020 profile image
amaben2020

yeah, but most codebases already have redux, to maintain such codebases, you must have a solid grasp of redux. Don't you think that this makes redux very important till date?

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

Important in existing ones sure, if you are forced to use it and not allowed to change it you have no choice. But if you have the choice there are alternatives.

Collapse
 
aralroca profile image
Aral Roca

No the only one 😛 this one is much simple github.com/aralroca/fragstore and you can consume parts of the store avoiding inecessary rerenders ☺️

Collapse
 
imamabdulazis profile image
Imam Abdul Azis

what about redux toolkit?

Collapse
 
ivan_jrmc profile image
Ivan Jeremic

I would not use it personally, recoil + react-query is what I use currently

Thread Thread
 
imamabdulazis profile image
Imam Abdul Azis

Can I know the reason?
or just explain why you not using redux toolkit.

Thread Thread
 
ivan_jrmc profile image
Ivan Jeremic

They simply hacked rtk together only because they saw that people started using other libraries, I don't like this, also other solutions work better and are cleaner.

Thread Thread
 
imamabdulazis profile image
Imam Abdul Azis

understood, make sense for me brother.

Collapse
 
avkonst profile image
Andrey • Edited

Hookstate hookstate.js.org/ should be in the list too. It is the only lib which gives an efficient solution for deep nested state updates. And it probably has the simplest same API for all states: global, local, parent, nested, async, etc..

Collapse
 
robvirtuoso profile image
robvirtuoso

Why do you feel the need to promote your library everywhere if it is really that good?

Collapse
 
avkonst profile image
Andrey

Everywhere is a bold statement. I do not have a budget to do it everywhere.

Thread Thread
 
robvirtuoso profile image
robvirtuoso

That is exactly the point... if you had the budget, you would be literally everywhere.

Thread Thread
 
avkonst profile image
Andrey

No, I would not. I direct money elsewhere. This library is published without having a viable commercial business model in mind. I have got other things for this purpose.

Collapse
 
redbar0n profile image
Magne • Edited

Valtio is the newest kid on the block. From the creator of Zustand and Jotai.

  • Pros:

  • Cons:

    • mutation based (no immutability...)
    • a bit magical
    • can have some performance overhead ref

Would be interesting to hear your opinion on Valtio.

For reference, here is a useful brief overview over the general approaches:

  • Flux (Redux, Zustand)
  • Proxy (Mobx, Valtio)
  • Atomic (Recoil, Jotai)
Collapse
 
cadams profile image
Chad Adams

React Query + Zustand 🙂

Collapse
 
csulit profile image
Christian Angelo M Sulit • Edited

Any benefits when paired with zustand? Why not use getQuerData instead? I want to hear your thoughts about this pair 😊 -just curious

Collapse
 
fhefh2015 profile image
fhefh2015

React Query + Zustand

Collapse
 
bwca profile image
Volodymyr Yepishev

Recoil is amazing :)

Collapse
 
rel555 profile image
rel555

In my opinion Apollo client (GraphQL) is the best

Collapse
 
onlyayep profile image
Arif Rahman

Being experience using Apollo Client for couple of years. I couldn’t agree more. Though is quite a different approach on managing state with using normalizing cache.

Apollo useVar really being helpful for managing client state!

Collapse
 
phacus profile image
Tiago Rinaldi

Thanks for sharing sources.

Unfortunately the comments section is not that capable to discuss your article. (No, I would not do a better job commenting too)

Collapse
 
xseman profile image
Filip

Using vanilla state management, no need for more bloat and complexity.

Collapse
 
silverium profile image
Soldeplata Saketos

What you imply is that all people using React, Redux, Recoil, or any tool like npm, jQuery, or whatever, they are dumb because they don’t need anything. They could do it by themselves using vanilla JS. They could even do everything inside a single HTML file written in notepad.

We are so dumb!

Collapse
 
egucciar profile image
Erica Gucciardo

We have a vanilla solution too. What's your experience been?

Collapse
 
sefrem profile image
sefrem

This article could've consisted only of one word - Mobx.

Collapse
 
mprzodala profile image
Mariusz

Try eventrix. It’s a new open source alternative for redux. It’s faster than redux and it has a built-in event bus. Test it and let me know what you think.

Collapse
 
liximomo profile image
liximomo
Collapse
 
hknasit profile image
Harsh Nasit

should I use React Hooks or State Management Library or I should create my JavaScript code which holds the global state?

Collapse
 
eduardodevop profile image
eduardodevop

This is simply... Just use "Easy Peasy" library, this is zero boilerplate, easy and powerful 🥰

Collapse
 
ahmedmesawer profile image
Ahmed Mesawer

What about reactn??!!

Collapse
 
yeo311 profile image
Jihoon Yeo

This is so helpful post for me. I appreciate you. Can I translate this into Korean and repost on my blog? I think this is helpful to any other Korean developers.

Collapse
 
mihaelapopa profile image
Mihaela

Sure, please feel free to do it!

Collapse
 
dcsan profile image
dc • Edited

What about loading data from the server, the main point of state, and ridiculous redux doesn't handle it without thunks or yet more plugins. How is recoil?

Collapse
 
elusive241 profile image
elusive24

Redux is unopinionated library, thats why it doesnt include server data handling.
Actually last alpha of redux-toolkit contains RTK Query - tool for data fetching and caching.
github.com/rtk-incubator/rtk-query

Collapse
 
juriii profile image
Jurij Koch

what is recommended for classic apps with one save button/reset button for multiple tabs and many textfields/tables?