Client state after the query cache: Zustand vs Jotai vs RTK vs plain React 19 — Scorecard

Now — and only now — the shootout. Every row is scored against a job that is three fields wide, so bundle weight and boilerplate are real costs while devtools depth is mostly theatre. Bars are drawn against the heaviest entrant (XState, ~15 KB).

Pos Library Verdict for itenium-ui Bundle gz Store setup Jest w/o React localStorage

THE PICK

Zustand v5.0 · ⭐ 59k [4]

createStore from zustand/vanilla is a plain object — no React import, no Provider, nothing to leak across Nx boundaries. Redux DevTools via the devtools middleware, so you keep time-travel without the 12 KB.

1.2 KBlightest that persists

~12lines, no Provider ^[25]

YescreateStore().getState() — zero React ^[12]

Built inpersist + partialize + migrate

Jotai v2.20 · ⭐ 21k [5]

Best TS inference of the group and an automatic per-atom dependency graph. The credible runner-up — take it if you ever find yourself fighting selector granularity. Context-first by its own docs ^[11]: provider-less works, but test isolation pulls you back to <Provider> ^[27].

3.5 KB3× Zustand

~1line per atom

YescreateStore() + store.get/set ^[20]

Built inatomWithStorage

Valtio v2.3 · ⭐ 10k [7]

Fine engineering — useSnapshot is useSyncExternalStore + proxy-compare, so render tracking is automatic ^[26]. But mutable proxy semantics fight the immutable habits of a .NET architect, and it buys nothing Zustand doesn't.

3.2 KBproxy runtime

~5lines, mutable

Yesthe proxy is a plain object

Manualhand-rolled subscribe

Redux Toolkit v2.12 · ⭐ 11k [6]

Best-in-class time-travel devtools — for three booleans you will never open them. The store is only reachable through React context, so libs/state becomes a React lib both apps must wrap themselves in ^[10]. You test reducers, not the store.

12 KB10× the winner

~28lines + Provider ^[25]

Partlyreducers are pure — the wiring still needs a Provider

3rd partyredux-persist

XState v5.32 · ⭐ 30k [8]

Not a competitor — a scalpel. Excellent for one genuinely gnarly wizard via @xstate/store ^[21], which drops into libs/ cleanly. Adopting statecharts as the app's state layer for three booleans is not KISS.

~15 KBheaviest entrant

machinedefinition per concern

Yesmachines run headless

Manualno built-in persistence

Plain React 19 useState · useReducer · Context

Wins the bundle column outright and still loses the tie. Context re-renders every consumer on value change ^[19] — fine for a theme that flips twice a session, wrong for anything a table touches. And you cannot test your state logic without React at all.

0 KBalready in the app

0nothing to install

Noneeds renderHook + a wrapper

Nohand-rolled useEffect

Read the last row twice. Plain React posts the best bundle score on the board and still isn't the pick — the two columns it fails are the two the job actually has. That is the whole argument: persistence, plus not re-rendering the world from a theme Context. It's a 1.2 KB problem.

import { useStore } from 'zustand'; import { createStore } from 'zustand/vanilla'; import { createJSONStorage, persist } from 'zustand/middleware'; export type Theme = 'light' | 'dark' | 'system'; export interface UiPreferences { theme: Theme; sidebarCollapsed: boolean; hiddenColumns: Record<string, string[]>; setTheme: (theme: Theme) => void; toggleSidebar: () => void; toggleColumn: (table: string, column: string) => void; } export const uiPreferencesStore = createStore<UiPreferences>()( persist( (set) => ({ theme: 'system', sidebarCollapsed: false, hiddenColumns: {}, setTheme: (theme) => set({ theme }), toggleSidebar: () => set((s) => ({ sidebarCollapsed: !s.sidebarCollapsed, })), /* toggleColumn: table-keyed, see canonical */ }), { name: 'itenium.ui.preferences', version: 1, storage: createJSONStorage(() => localStorage), partialize: ({ theme, sidebarCollapsed, hiddenColumns }) => ({ theme, sidebarCollapsed, hiddenColumns }), }, ), ); export const useUiPreferences = <T,>( selector: (s: UiPreferences) => T, ): T => useStore(uiPreferencesStore, selector);

import { uiPreferencesStore } from './ui-preferences.store'; const initialState = uiPreferencesStore.getInitialState(); beforeEach(() => uiPreferencesStore.setState(initialState, true)); describe('uiPreferencesStore', () => { it('toggles a column off, then back on', () => { const { toggleColumn } = uiPreferencesStore.getState(); toggleColumn('users', 'email'); expect(uiPreferencesStore.getState() .hiddenColumns['users']).toEqual(['email']); toggleColumn('users', 'email'); expect(uiPreferencesStore.getState() .hiddenColumns['users']).toEqual([]); }); it('notifies subscribers on theme change', () => { const listener = jest.fn(); uiPreferencesStore.subscribe(listener); uiPreferencesStore.getState().setTheme('dark'); expect(listener).toHaveBeenCalledTimes(1); expect(uiPreferencesStore.getState().theme) .toBe('dark'); }); });

Six libraries
are fighting over
three fields

The cut — who is actually global

The league table

Weekly npm downloads — dedicated client-state libraries

Where the store lives — the Nx tiebreak

libs/state — tagged type:util, scope:shared

apps/file-management — owned locally

The proof — the store under Jest, no render

The reset idiom

The one environment constraint

Cards shown

Object selectors in Zustand v5

The wizard draft in the global store

“Context is free”

XState as the app's state layer

Full time — the stack for itenium-ui

Elsewhere in this expedition

Sources