What Are First Principles?h2

First principles thinking means breaking down complex problems into their fundamental truths and building up from there. Instead of memorizing patterns or immediately reaching for popular libraries, we ask: What is state? Why do we need to manage it? What problems naturally arise as applications grow?

The Foundation: Understanding Stateh2

At its core, state is simply data that changes over time. In React, state represents the dynamic parts of your UI—the values that, when changed, should trigger a re-render to reflect those changes visually.

Consider a simple counter. The number displayed is state because it changes when users interact with the buttons. The label “Current count:” is not state—it’s static and doesn’t change. This distinction seems trivial, but it’s the bedrock of everything that follows.

Starting with Component Stateh2

React’s built-in useState hook is the atomic unit of state management. Every state management solution, no matter how complex, ultimately builds upon this foundation.

When you write const [count, setCount] = useState(0), you’re establishing a contract: this component owns a piece of data, and when that data changes, the component re-renders. This locality of state is powerful—the component that needs the data owns it, making the relationship explicit and traceable.

But problems emerge as applications grow. What happens when multiple components need the same piece of state? What if those components are far apart in your component tree?

The State Sharing Problemh2

Imagine building a shopping cart. The cart icon in your header needs to display the number of items. The product list needs to know which items are in the cart to show “Added” badges. The checkout page needs the full cart data to calculate totals.

The naive solution is lifting state up—moving the cart state to a common ancestor of all these components. But this creates new problems. Your root component becomes bloated with state that logically doesn’t belong there. You find yourself passing props through multiple levels of components that don’t actually need the data, just to get it where it needs to go. This “prop drilling” makes your components tightly coupled and your code harder to maintain.

Context: React’s Built-in Solutionh2

React Context provides a way to share state across components without prop drilling. By creating a context and provider, you establish a sort of “wormhole” through your component tree—any component can reach into the context and access the shared state.

But Context isn’t without tradeoffs. Every component that consumes a context re-renders when any part of that context changes. If your cart context includes both the items and the UI state for whether the cart drawer is open, updating the drawer state unnecessarily re-renders every component that reads the cart items.

This leads to a crucial realization: state management isn’t just about sharing state—it’s about controlling when and how components re-render.

The Three Dimensions of State Managementh2

As you build more complex applications, you’ll notice state management challenges fall into three categories:

State organization involves deciding where state lives and how it’s structured. Should user preferences be separate from user profile data? Should form state be managed locally or globally? These decisions affect both performance and developer experience.

State flow concerns how state changes propagate through your application. When a user adds an item to the cart, what needs to update? How do you ensure consistency? How do you handle derived state—values computed from other state values?

State persistence addresses state that needs to survive beyond a single session. Which state should be saved to localStorage? What gets sent to the backend? How do you handle synchronization between client and server state?

Building Your Mental Modelh2

Understanding state management from first principles means recognizing that every solution makes tradeoffs along these dimensions. Redux centralizes state organization and enforces unidirectional data flow but requires boilerplate. Zustand reduces boilerplate but offers less structure. MobX embraces reactivity but obscures when re-renders occur.

The key insight is that there’s no universally correct answer. The right solution depends on your specific needs. A simple blog might never need more than useState and occasionally useContext. A complex dashboard with real-time collaboration might benefit from a more sophisticated solution.

Practical First Principlesh2

When approaching state management in a new React application, start with these questions:

What data changes in response to user actions? This is your interactive state—form inputs, UI toggles, user selections. This state often belongs close to where it’s used.

What data comes from outside your application? This is your server state—API responses, database records, external feeds. This state has different characteristics: it can become stale, needs synchronization, and might be shared across many components.

What data is derived from other state? Instead of storing computed values, calculate them on the fly. If you store both items and itemCount, you risk them becoming out of sync. Derive itemCount from items.length instead.

What state needs to persist? User preferences might go in localStorage. Shopping cart might go in a database. Temporary UI state can disappear on refresh.

The Path Forwardh2

Learning state management from first principles doesn’t mean avoiding libraries. It means understanding the problems those libraries solve and making informed decisions about when you need them.

Start every project with React’s built-in state management. Use useState for local state. Use useReducer when state updates become complex. Use Context when you genuinely need to share state across distant components. Only when you hit the limitations of these tools—and understand exactly what those limitations are—should you reach for external solutions.

This approach might seem slower initially, but it builds a deep understanding that pays dividends. You’ll write less over-engineered code. You’ll choose the right tool for each job. Most importantly, you’ll understand not just how to manage state, but why each approach works the way it does.

State management isn’t about memorizing patterns or following trends. It’s about understanding the fundamental challenges of keeping data and UI in sync, and choosing the simplest solution that adequately addresses your specific needs. That’s the first principles approach—and it’s the foundation of mastering React.