I spent three years of my career treating Redux and Zustand like they were the default way to build any app. If a piece of data needed to be shared between two components, my first instinct was to hoist it to a global store. I thought I was building for scale. In reality, I was just creating a giant, tangled web of dependencies that made debugging a nightmare.
The Global Store Trap
The problem starts when we confuse "shared state" with "global state." Not every piece of data that is used in multiple places belongs in a global store. When you put everything in one place, you lose the ability to reason about your components in isolation. You end up with components that cannot function without a specific provider wrapping them, making testing and re-use much harder.
I remember a project where I put the user's form input state in a global store. Every single keystroke triggered a global state update, which triggered a re-render of the entire page layout. I spent two days optimizing memoization just to fix a problem I created by putting the state in the wrong place.
The Hierarchy of State
