Wait Before You Install a State Management Library For React.

Moving to a new programming language or framework is confusing and sometimes frustrating depending on your background to programming and experience. Sometimes you spend a lot of time on research and asking friends before settling on a new programming language or framework to learn. This even becomes worse when you try to amass everything about the language or framework in one gulp.

This same frustration is likely to set in when you start learning react with a ton of other state management libraries without having a firm grasp of react itself. Because react currently does not ship with any state management, there are a lot of options to pick from when it comes to state management and data caching. Some of these libraries may not be so "reactish" like you expect them to. And others come with their own boilerplate codes and standards that you should familiarize yourself with.

If you are new to reactjs, or you are getting frustrated with any of its state management libraries, don't get carried away. Pause and read this.

State management is an essential aspect of your application especially when it starts growing. Applications without good state management are unable to scale and have unpredictable behaviour. But wait before you run "npm install react-redux" or "yarn add react-redux" to your project. I am hammering on "react-redux" because it happens to be a very common use case.

The fear of state management frightens many newbies and even turn some away. This is because they try to learn the react library together with other state management libraries without having a firm grasp of react itself.

From the experience, I have had with react and react-redux, it is confusing trying to understand both of them at the same time. I spent time trying to figure things out and how react -redux plugs into react. But from what I experienced, I would admonish you to take them separately one at a time.

I would admonish that you spend time to understand the concept of react, know how to think in react and be able to behave like react expects you to. There is a way react developers think, we think in way that lets us break complex UIs into small chunks of robust components. Yes! you should be able to think in react before considering other libraries plugging into it. If you get to understand the principles of the react library and know how to manoeuvre your way around, it will be easier adding new dependencies to make your applications better.

There are a lot of state management libraries out there for react projects. This article does not have any interest in identifying which of them is best for your project nor which of them is bad for your project. What I want to highlight is that, focus on understanding react as a library. Try to build a few react projects without any third-party state management libraries. After all, you can use the react context API for your beginner projects.

This is not to say that react context is an alternative to any state management library. React context aims to solve the problem of "prop drilling (passing props several levels deep)". According to the official documentation from react, you are not encouraged to use react context all over your application. React context works best for data like the preferred theme, language options and other local settings that are required by several components in your application.

The introduction of "react-recoil" makes me think that react will have its own "reactish" state management soon. But until then, let's learn to install external libraries for state management if and only if we need them. Don't install any library because you are starting a react project. Install the library because your project needs it. If you are building a small project, you will ideally not need any sophisticated state management library. Check through the many options available and pick one that is just okay for the project you are working on. If your project only makes use of "UI theme", "language preferences" or just some small local settings, you can stick to the react context. As a personal experience, I feel the react context even gets cleaner when used with react hooks. Try these options, get used to react, understand the flow and boooom!! you can explore other areas.

Conclusion

Don't install a state management library because you are starting a react project. Instead, consider the size of your application, anticipate how it is going to grow and know the right approach to use.

If you now understand react, you can think in react and you want to use state management libraries, you can check these out in no particular order of importance.

1. React-redux
2. Mobx
3. Recoil
4. React Query
5. React Easy State

If you know of any good state management library for react that is not captured here, please leave a comment so that others can take some inspiration from it.

If you love this piece, don't forget to smash the clap icon. I would love to hear your comments too and the state management library that works best for you.