What I learned when I tried to replace Redux with Context + Hooks

Redux being Redux has a lot of boilerplate and needs a bunch of libraries to implement, and it increases the bundle size of an application. React's built-in Context API with hooks, on the other hand, is much easier to set up and adds nothing to the bundle.

So I tried replacing Redux with Context + hooks. It didn't go well.

Why replacing Redux was a bad idea

1. Providers nested deeper and deeper. Every slice of state got its own context provider, and the tree turned into a pyramid of them.
2. Everything re-rendered. Any change to one of these context objects caused almost every component to re-render on each user interaction.
3. State got hard to maintain. As the project grew more complex, it became hard to reason about where state lived and who changed it.

When to use Context + hooks, and when not to

After some research, this is what I learned:

1. For low-frequency updates like locale, theme changes or user authentication, React Context is perfectly fine.
2. For complex state with high-frequency updates, React Context isn't a good solution.
3. That's because Context triggers a re-render on each update, and optimising that manually is really tough.
4. That's where a solution like Redux is much easier to work with.