Petros Kyriakoupersonal blog

I am a full stack web developer. Love tinkering all the time, especially anything javascript related.

Why React Context can be enough for managing global state

March 05, 2022

Recently, someone asked in a reddit channel what people use for state management for use in react. A lot of people jumped in and said redux.

I also jumped in and said something along the lines of:

You don't need a state management library. I have been using react hooks and context as needed for the past 3 years in medium and large sie apps with real data coming in. It all depends on the project of course. So my opinion is NOT to learn any state management libraries until you actually need, and you will know when the time comes.

I also went and jumped on some existing conversations and I stated you can use React Context for state management.

The above, opened the box of pandora and people started fuming that I said React Context can be used to manage global state.

Is React Context a state management tool?

The simple answer that people neglected to understand is that I have been saying to them that with the help of react hooks e.g useState and useReducer and React Context, yes you can have a global state management tool.

React context by itself is a dependency injection system. It just connects component A with component B. It doesn't manage state by itself.

And then the questions went like this.

OK, you can READ state but, you cannot mutate state

And again, well you can of course. You can pass down to React Context a mutate function or a bunch of them and manage the state.

The next issue with my response was the following

React Context versus X causes re-renders

React Context is not performant... they said

I believe we are so stuck on performance and we wear it like a badge of honour that keeps drilling in all kinds of conversation without having a need in them.

Let me tell you this. Performance and re-renders don't matter as much as you think.

React is fast, re-renders are OKAY. You don't need to do premature optimizations until you need to do so. And you will realise it. You will notice it.

On the other hand, React Context versus Redux, yes the main difference is React Context causes re-renders to the whole tree underneath the provider.

There are however, ways to mitigate that but as soon as I mentioned that, people started telling that these are hacks.

My translation is, use the tool at hand that will do the job. Some apps might require these "hacks", while others might required a "proper" state management tool.

You don't need a state management tool for 99% of cases

At the moment, Redux is popular and all kinds of people use it in a trigger-happy way without stopping for a moment and think if Redux is really needed in their app.

If all you do is read and mutate data without needing data co-location and don't care about updating only part of the state then you probably don't need Redux.

I have been working for over 3 years at medium and large codebases without any need for Redux or any other kind of state management tool. React Context + React hooks (where needed) do the trick with no issues.

Given that I have years of experience not being tight to such a tool, I am pretty sure that people just use a state management tool because they haven't tried anything else. People always recommend these kind of tools and hence you get to a point where you cannot leave without such a tool because of suggestions by others, hype and fear of developing an app without one.

That partly comes from the fact that React is not opinionated enough to have some standard tools. And to me, thats okay. I can live with that. In fact I endorse it. I have used other frameworks like Angular before and without hesitance I truly prefer an unopinionated way of doing things.

Conclusion

I still stand with what I said above. You don't need any state management tool until you do. When that happens, you will know about it.