After completely removing Redux from most of my codebases, I realised that it's not half as important as most of the internet seems to believe. So do you need Redux really? Here's a little exploration on why you should think about dropping it altogether.

What is Redux?

In case you're not aware, Redux is a state management library for React. It's now been out for a while, with its first release being from 2015~, and a lot has changed within the React ecosystem since then.

While I wasn't that big into React before the introduction of React hooks, from my understanding managing global state in class components was quite difficult. And so, from this need to find a way to manage global state, Redux was born.

Why would you want to get rid of Redux?

There's nothing inherently wrong with Redux. That being said, I reckon you should always be looking at ways to reduce your Javascript bundle size, and while Redux isn't the biggest library, removing it will still make a considerable difference.

However my biggest reasons are simply two:

• You can reduce the complexity of your code
• You can replicate its functionality with your own code

Let me explain both of these in detail.

Redux makes your code more complex

Here's a really simple example:

This shows the basic suggested Redux setup. If you've used Redux before you're probably aware of how much boilerplate it needs:

• You need a <Provider /> around your app
• You need to create a store for your initial state
• That store needs a reducer, to actually change the state
• Then you need to define both your actions and action types

All these completely separate files are exclusively to start using Redux. You then need to wrap your components with a connector and a way to map the state to your props.

Let's be frank here: it's a mess. It's so needlessly complex. I've seen experienced devs confused by the setup, so you can imagine how difficult it might look to a junior developer. I know I definitely had trouble with when I was starting out with React.

Replacing Redux with React Hooks

Do you need Redux? No. But you do need something to manage your global states. And that's where React Hooks come in.

Hooks don't just simplify React, they make it much easier to extend and improve it. In my opinion hooks are a perfect replacements for a complex state manager like Redux and solve most if not all problems I have with it.

Take a look at this example which replicates the one I posted above.

This React Hook example improves from the example using Redux in a bunch of ways:

• Keeps the code simple and easy to understand
• Reduces boilerplate code
• Makes our state easy to re-use across components

The functionality here is exactly the same as the Redux example above, with none of the complexity. All the functionality of state management is self-contained inside useCount and the state itself is managed by a Context.Provider, which passes the state down to the children component.

The state can be changed and viewed by any of the provider's children by simply calling:

const { count, increase, decrease } = useCount();

Realistically, we can do anything we want with our state inside the custom hook. You could even return a component that renders in a specific way and use that to display the value.

So do you need Redux?

Let's be honest here, how complex is your global state? Even if you're working with a complex web-app, it's likely you won't need to do a whole lot with it aside from loading essential data to optimise your requests.

Even if you wanted to use Redux just for some complex global state I would argue that the boilerplate needed (plus the Redux library itself) would probably outweigh the amount of data saved during your requests.

What I'm trying to get at is that React has changed a lot over the past couple of years and if you don't know for sure that you need Redux, then you're probably better off not using it at all.