tezvyn:

Local state versus global state management

AI-drafted, machine-checkedSource: interviewbeginner
WHAT IT TESTS

scoping state correctly.

OUTLINE

keep state local with useState/useReducer when it is used by one component or its subtree; reach for Redux or Zustand when many distant components share and mutate the same state.

WHAT THIS TESTS Whether you have judgment about where state should live, choosing the smallest owner that works and escalating to global state only when genuine sharing demands it.

A GOOD ANSWER COVERS Use local state with useState when a piece of data is owned by one component, like a toggle, an input value, or a modal's open flag. Use useReducer when that local state has complex, interrelated transitions or a clear set of actions, such as a multi-step form. When two or three components need the same state, first try lifting it to a common ancestor and passing it down, or Context for read-mostly shared values. Reach for a global store like Redux or Zustand when many components across distant parts of the tree must read and mutate the same state, when updates are cross-cutting, when you want a single predictable source of truth and devtools or middleware, or when lifting and drilling have become painful. The guiding principle is to start as local as possible and escalate only when sharing forces it.

COMMON WRONG ANSWERS Putting all state in a global store by default, which adds boilerplate, widens re-render scope, and obscures ownership. The opposite mistake of keeping shared, app-wide state local and then prop drilling it everywhere. Treating Context as identical to Redux for high-frequency updates. Reaching for Redux for trivial single-component state.

LIKELY FOLLOW-UPS Where does server state fit, and why might React Query own it instead of Redux? How does Zustand differ from Redux in boilerplate and re-render behavior? When is lifting state up enough versus introducing a store?

ONE CONCRETE EXAMPLE A search screen keeps its query text and focus in local useState because only that screen cares. The authenticated user and cart contents, needed by the header, profile, and checkout across the app, live in a Zustand store so any screen reads and updates them without drilling. A wizard with several dependent fields uses useReducer locally for clean action-based transitions, never touching the global store.

Read the original → reactnative.dev

Get five bites like this every day.

Tezvyn delivers a daily feed of 60-second tech bites with quizzes to lock in what you learn.