Never Use React Context

There's a popular saying in frontend development that performance doesn't matter until it does. This is for the most part, true. But performance isn't a goal in itself for most businesses. For those businesses, performance actually becomes a concern once it impacts other aspects of the business like user experience, SEO or conversion rate for example.

What all this has todo with React Context? Well... it potentially has such a devastating hit on performance that the user experience is critically affected. In this blog post I'm gonna show you why I think you should avoid using it from the start, and save yourself from a lot of trouble.

I'm going to talk about React Context as a global state management solution, but my points are valid beyond just this topic, so pay close attention if your unfamiliar with some of these problems and you'll save yourself a lot of headache in the future.

Before we dive into pros & cons, let's see what React Context is designed for and what is a global state management solution

Global state management is a means to centralize and manage changing data in an application, making it easily mutable and available to all components in the application.

A deserved solution must be Super

• Simple
• Fast
• Light
• Scalable
• Reliable
• Flexible

And also provide ways to

• subscribe to changes
• update state
• access state
• hydrate state
• cache state
• migrate state versions
• connect to dev tools
• integrate with a server
• and more in case i missed stuff...

As you can see, its a serious business.
Which is why the React team left it open for the community to come up with suitable solutions.
more on that later...

https://react.dev/learn/passing-data-deeply-with-contextStated directly from the react docs, react context is a way to pass data through the component tree without having to pass props down manually at every level.

In laymen terms, Its a to avoid something called prop drilling. Technically this is a state management solution because most props are also managed states somewhere up the tree of your app.

But when React Context was first introduced, many things were unknown and un-thought of yet.

The React Context API is a bare bones solution for a very specific problem. It was not designed to be a global state management solution and is lacking in many areas that we shall explore soon.

So why the fuck do people still keep nagging about the subject years later?
A little history lesson can give us some context about that.

A little history lesson: react context first came out in react v16.3 in 2018,
and in that pre-historic time there was only 1 well known solution for global state management.
It was called Redux, and it sucked... big time!
Now, this is just my opinion
of course... 凸( •̀_•́ )凸

React-Redux became the industry standard for managing state.
But many people like myself were not satisfied and were looking for alternatives.

When the React team introduced the Context API, Many people saw it as a potential replacement for Redux and rushed over to check it out.
I was also looking for a replacement for Redux.
I tried implementing my own solutions and realized very quickly I'm wasting my time.
I tried the Context API, the API itself was not as good as what i was expecting, but it was good enough~

I soon run into trouble. When I added data that didn't change frequently, it was fine. But as soon as i had data that changed frequently, the performance of my app became terrible.