Member-only story

Your React Component Has Too Much State. Here’s How to Fix It.

The problem isn’t always how many useState hooks you have. It's how those pieces of state depend on each other.

Uday Ahirav

10 min read10 hours ago

Press enter or click to view image in full size

A React component rarely becomes complicated overnight.

It usually starts with something small.

One state variable for a search input. Another for a selected item. Maybe one more for filtering.

Everything works.

Then a new requirement comes in.

“Can we also show the total number of matching products?”

Sure.

A little later:

“Can we reset the selection when the user changes the category?”

Also manageable.

But eventually, you open the component and find yourself looking at six state variables, three effects, and several handlers that keep updating one another.

At that point, the problem might not be React.

It might be the way we’ve designed our state.

And surprisingly, adding a state management library isn’t always the…