Managing State in React

Yariv Shamash — Sun, 21 Jul 2024 14:09:07 +0000

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

Next.js and

Yariv Shamash — Sun, 20 Mar 2022 09:34:26 +0000

A quick share of my experiance with Next.js and .svg files.

I needed to display a bunch of .svg files on a Next.js app.

Using .svg files with Next.js super cool <Image /> component is not recommended since it can create unexpected behavior and lead to vulnerabilities if a security policy header is not defined.

So I needed to incorporate a loader.
The quickest way I found was using .babelrc file and babel-plugin-inline-react-svg.
It worked! well kind of.. 😕 Some graphics were not displayed and some did, while others were cut off unexpectedly.

I dug a bit more and found this answer by @felixmosh on stackoverflow using next.config.js file.

TL;DR:

~ Step One:

$ npm install --save-dev @svgr/webpack

~ Step Two:

// next.config.js

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/,
      issuer: {
        test: /\.(js|ts)x?$/,
       // for webpack 5 use
       // { and: [/\.(js|ts)x?$/] }
      },

      use: ['@svgr/webpack'],
    });

    return config;
  },
};

If you used the above solution make sure to give the question and the answer a vote up on stackoverflow 🙂

Side note, if you’re using typescript in your project and feel bad that the next.config file is a .js file don’t because next does not plan “to transpile next.config.js.” As you can see in this issue.

I hope it helped, thanks for reading!

DEV Community: Yariv Shamash

Managing State in React

Comparison

Redux

Atomic State Management

React Context

TanStack Router's "Pro Bono" Context

Summary and conclusions

Pros and cons Summery

Redux

Atomic State Management

React Context

TanStack Router's "Pro Bono" Context

Next.js and

TL;DR: