A while ago i wrote a bit of a click bait article about redux called "Why I cringe when I get asked about Redux in an interview!". I still feel the same way about Redux, but the gist of it was that there was too much content on how amazing Redux was but not enough content on realizing the cost of using redux which led to many developers storing unneeded information in Redux. There is more content on that thankfully and there is place for conversation in interviews as to the philosophies of global state management.

But here is my take on state management 2021.

Local State

I stopped using React a few years ago when Hooks were implemented and i recently picked it back up. After using it I have to say i love how react hooks work. I love their simplicity. I love how hooks can use each other to compose functionality.

My only complaint is that they do not work on react classes. I liked classes because it allowed me to keep the render function small by having functions or properties that would return a react component without having to make multiple different components and drill props into each of them.

With that being said, Hooks are a great way of separating business logic from render logic, and then functional components encourage you to separate components which can increase code quality in certain cases. I do believe Higher Order Components still have a place and they can still be implemented with functional components.

Global State

Redux

As stated before, I am not a big fan of Redux although i do believe it has its place. I am currently working on a project that was built on Redux and it works but we arent too happy at the complexities of the data stores. Thankfully our global store is something that does not change often and therefore it has survived but if need be I believe refactoring to something better would be beneficial.

What I do not like about Redux is all the boilerplate code required, thankfully there are libraries to make easier interfaces. Easy Peasy is one of those new methods that makes it really easy to use Redux.

Mobx

I absolutely love MobX. I love that it is Object Oriented Programing at a data layerI love computed states. I love that it feels like magic. I believe magic is useful as long as there is documentation and that it is of limited scope.

I have not had the opportunity to use MobX too much due to legacy browser support. But now days it seems like businesses are starting to bite the bullet and not support legacy browsers for many reasons, security being one of them. So for your next project consider using MobX, it will be delightful.

ES6 Proxy is required for MobX 5, you can check support here. ES6 Proxy Browser Support

Recoil

As I said before in terms of Local State, i think Hooks are amazingly powerful and simple. Recoil is basically Hooks but for global state. I am not going to go too much into details due to the familiar nature of hooks at this point.

Recoil is as simple as using react hooks. Recoil has not yet released it's 1.0.0 version yet and it is in experimental mode yet. But when it does, i can't imagine how it wont take over the global state scene FAST. it does not have the support issues that MobX, it does not have the boilerplate code cost of Redux and it is familiar to most React developers since it is basically React Hooks.

Conclusion

I love hooks and how clean they are. Because of this i believe Recoil will take over fairly fast once it comes out of experimental mode.

Building complex apps in the future will be that much easier.

That is, if Svelte does not eat React's lunch.