How to manage state in modern frontend applications: a practical guide

State management is often over-engineered in frontend applications. The best state management strategy is the simplest one that works for your use case. Most UIs don't need Redux; many don't need any state management library at all.

Start with component-local state using useState and useReducer. This is sufficient for forms, toggles, and UI state that doesn't need to be shared. The majority of state in a typical application can live here.

For shared state, consider React Context for simple cases. Context avoids the boilerplate of external libraries but has performance limitations. Components consuming context re-render whenever the context value changes, regardless of whether the specific data they use changed. Split contexts to minimize unnecessary re-renders.

Server state data from your API should be managed with a library like TanStack Query or SWR. These tools handle caching, background refetching, optimistic updates, and request deduplication. They eliminate most of the boilerplate that Redux required for async data.

URL state is underused. Store filter values, search queries, pagination, and tab selection in the URL. This makes these states shareable via links, preserves them on refresh, and works with browser navigation. Parsing and serializing URL state is straightforward and gives you deep linking for free.

If you do reach for a state management library, Zustand is the modern default. It's tiny, has no boilerplate, works outside React, and scales well. Use it for truly global state like user preferences, theme, and authentication status that many unrelated components need.

Avoid storing derived state. If you can compute a value from existing state, compute it when needed rather than storing and syncing it. Derived state is a source of bugs when the derived value falls out of sync with its sources.

Test your state logic separately from your UI. State management code is pure logic and should be unit-testable without rendering components. This gives you fast, reliable tests that catch logic errors before UI tests could.

-

Rizwan Saleem | https://rizwansaleem.co