How to actually use global state in React?

Question

In my company, all of the projects use at least some kind of global state library like Redux and MobX.

However, the actual usage is limited to storing fetched data, and it lacks any caching logic or mechanism. It's merely used to store the method for fetching data and the property for the fetched data.

Personally, I find this approach redundant because we could instead use something like react-query, which would not only accomplish the same task but also provide better caching capabilities.

For tasks like theming, we are already using MUI, which offers the <ThemeProvider> and useTheme() hook, eliminating the need for additional global state libraries.

Despite my confusion, I understand that there must be reasons for using global state libraries. However, I cannot identify any specific advantages. These libraries continue to have significant weekly downloads, indicating that there is likely a crucial aspect I am overlooking. I would appreciate it if you could share your insights and explain why global state is still necessary in React (in general, not just based on the example I mentioned earlier).

Answer 1

Choosing to use global state libraries like Redux or MobX in React often comes from past decisions and their benefits. Many older projects started with Redux because it was popular and now find it hard to switch. Redux is predictable and has tools that make debugging easier. It also has features, like middleware, that help manage complex tasks. While newer tools like react-query are great for fetching and storing data, Redux and MobX can handle a wider range of needs. They also have big communities, meaning lots of support and resources. For companies using Redux or MobX in many projects, it keeps things consistent for developers. But, it's true that for some projects, simpler tools might be better. The best choice depends on the project's needs and what the team knows best.