For years, we senior engineers have been the cartographers of application state. We’ve drawn intricate maps with the precise, unyielding lines of Redux. We knew the rituals by heart: the defining of actions, the crafting of reducers, the composing of selectors, the weaving of middleware. It was a grand, formal architecture. It brought order to chaos. It was predictable, testable, and for a time, it was perfect.
But as our applications grew from simple pages into rich, interactive experiences, the ceremony began to feel… heavy. We found ourselves writing more boilerplate than business logic. We were mapping the territory so meticulously that we had less time to explore it.
The modern era isn't about tearing down the old cathedral. It's about discovering new, nimble tools that allow us to sculpt state with intuition and directness. It’s a shift from grand architecture to ergonomic artistry.
Let’s embark on a journey beyond the familiar map and into the workshop of modern state management.
The Journey: From Architecture to Ergonomics
Our journey begins with a moment of recognition. You need to add a simple piece of global state—a user theme preference, a modal's open status. The thought alone triggers a muscle memory: ACTION_TYPE_SET_THEME
, themeReducer
, mapStateToProps
... a symphony of files.
The new libraries ask a different question: "What is the most direct and intuitive way to express this state and its meaning?"
They are less about enforcing a architecture and more about providing ergonomic, composable primitives. They are the sculptor's clay, the woodworker's chisel—tools that feel like an extension of your intent.
The Masterpieces: Three Modern Tools
Let's examine three distinct tools, not as mere libraries, but as different artistic mediums.
1. Zustand: The Minimalist's Sculpture
The Philosophy: Zustand (German for "state") is the art of subtraction. It asks: what is the absolute essence of global state? It discards the boilerplate and gives you a single, powerful hook into a store. It’s state, distilled.
The Mental Model: Think of it as a mutable, centralized object that you can subscribe to. You take what you need, and nothing more.
The Code Artistry:
// The sculpture is defined with stark clarity
import { create } from 'zustand'
const useThemeStore = create((set, get) => ({
// State
theme: 'light',
userPreference: null,
// Actions: Directly baked into the store
toggleTheme: () => set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
setUserPreference: (preference) => set({ userPreference: preference, theme: preference }),
// Derived state (a "getter")
isDarkMode: () => get().theme === 'dark',
}))
// In the component, you take only the fragment you need.
function ThemeToggle() {
// Be specific! This only re-renders when `theme` or `toggleTheme` changes.
const { theme, toggleTheme } = useThemeStore((state) => ({
theme: state.theme,
toggleTheme: state.toggleTheme
}))
return <button onClick={toggleTheme}>Current theme: {theme}</button>
}
Why a Senior Developer Loves It: It feels like using useState
but for the whole app. The power is immense, the boilerplate is near zero, and the performance is exceptional due to precise subscription-based updates.
2. Jotai: The Atomic Composition
The Philosophy: If Zustand is a sculpture, Jotai (Japanese for "state") is a mosaic. It builds complex state from tiny, irreducible units called atoms. It’s the spiritual successor to React’s own useState
, but for globally accessible state.
The Mental Model: Imagine every individual piece of state—a username, a pixel value, a fetched API response—as a single atom. You then compose these atoms to form new, derived atoms, creating a graph of state relationships.
The Code Artistry:
import { atom, useAtom } from 'jotai'
// Define your primitive atoms
const themeAtom = atom('light')
const userPreferenceAtom = atom(null)
// Compose a new derived atom. It automatically updates when its dependencies change.
const derivedThemeAtom = atom((get) => {
const preference = get(userPreferenceAtom)
return preference || get(themeAtom)
})
// Compose an atom with writeable actions
const toggleThemeAtom = atom(
(get) => get(derivedThemeAtom),
(get, set) => {
const current = get(derivedThemeAtom)
set(themeAtom, current === 'light' ? 'dark' : 'light')
}
)
// In the component, it feels just like useState.
function ThemeToggle() {
// Use the composed atom. The component only reads the value from `derivedThemeAtom`.
const [theme, toggle] = useAtom(toggleThemeAtom)
return <button onClick={toggle}>Current theme: {theme}</button>
}
Why a Senior Developer Loves It: It eliminates the need for context providers for every single state value. It's infinitely composable and leverages React's core primitives. It feels like the most "React" way to do global state.
3. Valtio: The Mutable Reflection
The Philosophy: Valtio (Finnish for "state") embraces a radical idea: what if state was just a plain JavaScript object that you could mutate directly, and the UI would automatically update? It uses proxies to make state objects "reactive."
The Mental Model: You create a "proxy state." You mutate it with regular JavaScript operations (state.theme = 'dark'
). You "snapshot" this state in your components to subscribe to updates. It’s state as a mirror that your UI reflects.
The Code Artistry:
import { proxy, useSnapshot } from 'valtio'
// It's just an object. Mutate it anywhere.
const state = proxy({
theme: 'light',
userPreference: null,
// No need to predefine actions; functions can be anywhere.
})
// Actions are just functions that mutate the proxy.
export const toggleTheme = () => {
state.theme = state.theme === 'light' ? 'dark' : 'light'
}
// In the component, you take a snapshot. This is reactive.
function ThemeToggle() {
// `snap` is a read-only snapshot that updates when the proxy changes.
const snap = useSnapshot(state)
return (
<button onClick={toggleTheme}>
Current theme: {snap.theme}
</button>
)
}
Why a Senior Developer Loves It: It offers a truly minimalistic, intuitive API for those coming from an OOP background or working with highly complex, nested objects. It feels like "magic" in the best way, removing all abstraction between you and the data.
The Palette of Choice: How to Select Your Medium
As a senior developer, you don't choose tools based on hype. You choose based on the problem at hand.
- Choose Zustand when you want a robust, minimalist external store. It's perfect for 90% of applications: predictable, devtools-friendly, and incredibly lean.
- Choose Jotai when your state is highly compositional and you want to avoid prop-drilling without Context hell. It's brilliant for building a complex state graph from simple parts.
- Choose Valtio when you are working with deeply nested, complex state objects that would be painful to update immutably (e.g., with Immer in Redux). It’s also great for a more OOP-style approach.
The Final Brushstroke: A Landscape of Purposeful Choice
This isn't a revolution against Redux. Redux is still a powerful tool for complex, high-ceremony scenarios where every action must be tracked and every state change must be centralized. It's the blueprint for a nuclear power plant.
But not every application is a nuclear power plant. Some are elegant sculptures, intricate mosaics, or dynamic mirrors.
The beauty of 2025 is the freedom of choice. We are no longer constrained to a one-size-fits-all solution. We can now select a state management tool that aligns perfectly with the architecture and philosophy of our project.
We have matured from cartographers, meticulously drawing every line, to artists, selecting the perfect medium to bring our vision to life. So go forth, and sculpt your state with intention. The workshop is open, and the tools are exquisite.
Top comments (0)