Managing State in React

As React developers we have several options when it comes to managing state in our applications.
Each component we create can hold state and share it with its children. But what happens when we want to share state across sibling components? How should it be done?
This article focuses on three popular approaches: Redux, atomic state management, and React Context. We'll also compare these with the "pro bono" context provided by TanStack Router.

Comparison

Redux

Redux is one of the most popular libraries but not necessarily one of the easiest ones to use. Its a predictable state container for JavaScript apps, widely used in the React ecosystem. It has powerful developer tools that help understand and debug the apps state and also a large ecosystem of middleware and extensions.
On the other hand using Redux requires a steep learning curve of the relations between a reducer, an action and a dispatcher and also quite a lot of boilerplate code.
Redux is actually notorious for that boilerplate code, which is something that I don't recommend overlooking.

Atomic State Management

Atomic state management solutions, like Recoil or Jotai, break down state into small, reusable units called atoms.
It's reducing unnecessary re-renders by allowing components to subscribe only to the specific pieces of state they need. When a state update occurs, only the components that depend on that particular atom will re-render, rather than triggering a re-render of the entire component tree or large sections of it.
It's so easy and comfortable to user, I remember the first time I used it I thought to myself "Wow! that's the way it should be done!" basically if you understood react's useState hook you'll understand how to use these libraries.

React Context

React Context is a built-in feature that allows passing data through the component tree without props drilling.
It requires setting up the specific context and a context-provider (a special react component).
You can use react's built in reducer to manage the state of the context and add all sorts of methods to handle the context as you wish.
After doing it each and every component that sits under the context provider in the component tree will have access to everything you exposed using the context provider.
It's a convenient way to separate concerns but it has a few drawbacks.
It's a bit cumbersome to use and requires creating a provider. Also, once your app becomes more complex and has many different concerns and therefore providers, you'll need to maintain all of that and make sure the context pyramid is built well and maintained.

TanStack Router's "Pro Bono" Context

TanStack Router (formerly React Router) provides a context as part of its routing solution. It's also has somewhat of a learning curve and not as intuitive as I expected one I used it first. But it's there and if your app is small and simple, you should consider using it because it enables us to run some context related actions before loading a page or specifying a loader function.

Summary and conclusions

For small to medium-sized applications with simple state requirements, React Context or is often sufficient and easy to implement, especially if you don't want to add another package to your project.
If you're already using tanstack-router consider using it's built in context as it is easier to use and provides some lifecycle methods. Saying that, it shouldn't be relied upon as a complete state management solution.

Atomic state management solutions like Recoil or Jotai are excellent for applications that need fine-grained control and optimized performance, especially when working with React's concurrent features (disclaimer, it's my favorite solution).

For larger applications or those with complex state logic, Redux remains a solid choice due to its ecosystem and powerful dev tools.

Ultimately, the best choice depends on your specific project requirements, team expertise, and scalability needs. It's often beneficial to start with the simplest solution (like React Context) and gradually adopt more complex tools as your application grows and demands increase.

I'll be happy to help and answer your questions here. Alternatively you can reach me on my LinkedIn account.

Happy coding :)

P.S. here's a bullet point summery for your convenience:

Pros and cons Summery

Redux

Pros:

• Predictable state updates
• Powerful developer tools for debugging
• Large ecosystem of middleware and extensions
• Well-suited for complex state logic

Cons:

• Steep learning curve
• Requires more boilerplate code
• Can be overkill for smaller applications

Atomic State Management

Pros:

• Fine-grained updates, reducing unnecessary re-renders.
• Easy to use and understand, almost no learning curve.
• Scales well with application size
• Works great with React's concurrent features

Cons:

• Newer approach, potentially less community support.
• May require a mental shift for developers used to global state

React Context

Pros:

• Native to React, no additional libraries required
• Simple to set up and use
• Great for passing global data (e.g., themes, user info)

Cons:

• Performance concerns with large-scale updates
• Can lead to deeply nested providers
• Not optimized for frequent updates

TanStack Router's "Pro Bono" Context

Pros:

• Seamlessly integrated with routing
• No additional setup required if already using TanStack Router
• Useful for route-specific data

Cons:

• Limited to routing-related state
• Not a complete state management solution
• Potential for misuse if overloaded with unrelated data