Day 11 of #100DaysOfCode — Understanding State Management in React

Source: Dev.to

Introduction

At this point I had covered almost every essential React topic: state, hooks, list rendering, conditional rendering, and more. For Day 11 of my #100DaysOfCode, the goal was to finally dive into state management in React.

State management isn’t a brand‑new concept; it’s about how you structure your app and handle state across components. Chances are you’re already using some form of state management, whether you realize it or not.

Types of State

In a React app you generally deal with two categories of state:

1. Local State – State that only one component needs, and no other part of the app depends on it.
2. Global State – State that multiple components—or the entire app—need.

Example: Todo List App

// Search.jsx (local state)
const [search, setSearch] = useState("");

The search state lives only in the search bar, so it stays local.

// App.jsx (global state)
const [items, setItems] = useState([]);

The items array is used throughout the app, so it makes sense to keep it at a higher level.

Lifting State Up

If several components rely on the same piece of state, move that state into a common parent component and pass it down as props. This pattern is called lifting state up.

Note: Lifting state ≠ making it global. It simply places the state where it logically belongs.

Practical Guidelines

• Place state where it logically belongs.
• Keep related logic close to the component that needs it.
• Avoid unnecessary states in App.jsx.
• If prop‑drilling becomes “too much,” consider the Context API to avoid passing props through many layers.

All of the above constitutes state management.

External State Management Libraries

Libraries such as Zustand, Redux, or Jotai address challenges that arise in larger, more complex apps.

When to Use a Library

• The app becomes difficult to manage with just useState or useReducer.
• The Context API becomes messy or too nested (“Context Hell”).
• You encounter performance bottlenecks from unnecessary re‑renders.

Typical Scenarios

• Small apps: Context + useState is usually enough.
• Medium to large apps: Consider a dedicated library when you see:
  • Duplicate states.
  • Excessive prop drilling.
  • Confusion about where a state “lives.”
  • Components depending on data they shouldn’t need.

When to Stick with Built‑In Tools

• Minimal prop drilling.
• No performance issues.
• No need for a large global state.

In many cases you don’t need external libraries; the built‑in tools are sufficient.

Scaling Considerations

As your React app grows, you may face:

• Performance issues.
• Deeply nested context providers.
• Re‑renders caused by large global states.
• Difficulty scaling or organizing state logic.

When these problems appear, a library like Zustand or Redux can be helpful.

Final Thoughts

The key is not to bloat your React app with every possible tool. Start simple, and only scale the state‑management system when your app actually demands it.

Day 11 was all about observing how to manage a React app properly as it grows.

Happy coding!