🚫 Anda tidak terhubung ke internet
CodeXtory
Best PracticeOptimizationFrontendReact.jsJavascript

State Management Mistakes in React: Lessons I Learned the Hard Way

M. Fadil Martias
3 min read•Dec 24
State Management Mistakes in React: Lessons I Learned the Hard Way

State Management Mistakes: It Always Starts Small

Every React project starts innocent.

A little useState here.
A prop passed there.

Everything feels clean.

Then one day:

  • Props drilling everywhere

  • Global state grows uncontrollably

  • Re-renders appear out of nowhere

That’s when you realize:
👉 state management mistakes are silent, but expensive.

Mistake #1: Putting Everything in Global State

This is the classic one.

“What if we just put everything in Redux/Zustand?”

Sounds efficient.
Ends up messy.

 
// ❌ Too much global state { isModalOpen, inputValue, selectedTab, tempFormData }

These states:

  • Only matter to one component

  • Don’t need to be global

Why this is bad

  • Unnecessary re-renders

  • Harder to reason about

  • Tight coupling everywhere

✅ Rule of thumb:
If only one component cares, keep it local.

Mistake #2: Lifting State Too High

We’ve all done this.

 
<App> <Dashboard> <UserCard /> </Dashboard> </App>

Suddenly:

 
const [user, setUser] = useState(null);

Lives in App.

Now everything depends on it.

The problem

  • Parent re-renders too often

  • Unrelated components update

  • Performance slowly degrades

✅ Lift state only when multiple siblings need it.

Mistake #3: Treating Global State Like Local State

Global state is not just “bigger useState”.

 
// ❌ Mutating or over-updating global state set(state => ({ ...state, user: { ...state.user, name } }));

Done too often, this:

  • Triggers many subscribers

  • Causes unexpected re-renders

✅ Global state should be:

  • Stable

  • Minimal

  • Well-structured

Mistake #4: Not Using Selectors Properly

This one kills performance silently.

 
// ❌ Subscribing to whole store const state = useStore();

Now:

  • Any state change → re-render

  • Even if you don’t use it

✅ Do this instead:

 
const user = useStore(state => state.user);

Same applies to Redux selectors.

Mistake #5: Overengineering Too Early

This one hurts beginners the most.

Day 1:

 
npm install redux zustand jotai recoil

Day 2:

“Why is this so confusing?”

Reality:

  • useState + useContext solves many problems

  • Not every app needs global state

✅ Start simple. Scale when pain appears.

Mistake #6: Mixing Too Many State Systems

I’ve seen apps using:

  • useState

  • Context

  • Redux

  • Zustand

All in one project 😵‍💫

Why this is dangerous

  • Hard to debug

  • Hard to onboard new devs

  • Mental overhead explodes

✅ Pick one main pattern, document it, stick to it.

How I Avoid State Management Mistakes Today

My current mindset:

  • Local state by default

  • Lift state only when needed

  • Global state = minimal & explicit

  • Measure before optimizing

Tools don’t save you.
Architecture decisions do.

FAQs

Is global state bad?
No, overusing it is.

Should I always use Redux or Zustand?
No. Only when needed.

Is Context enough?
For small apps, yes.

How do I know state should be global?
If many unrelated components need it.

Can bad state management hurt performance?
Absolutely.

Best advice?
Start small. Refactor often.

Final Thoughts

Most state management mistakes in React don’t crash your app.

They make it:

  • Slower

  • Harder to maintain

  • Stressful to work on

Good state management isn’t about libraries.
It’s about thinking clearly about data ownership.

Related Stories