sawrus/areas/software/frontend/skills/state-management

Skill: State Management

When to load

When deciding where to put state, choosing between local/global state, integrating server state, or debugging stale data.

State Classification Matrix

| State Type | Example | Solution | |:---|:---|:---| | Local UI State | Modal open/close, input focus | useState / useReducer | | Shared UI State | Theme, sidebar collapse | React Context + useReducer | | Server/Remote State | API data, pagination | React Query / SWR | | URL State | Filters, search params | useSearchParams | | Global App State | Auth session, shopping cart | Zustand / Redux Toolkit | | Form State | Input values, validation errors | React Hook Form |

Colocation Rule

State should live as close to where it's used as possible. Only lift state up when two components genuinely need to share it.

❌ Storing modal visibility in a global store
✅ Storing modal visibility in the component that renders the modal

React Query: Key Patterns

const { data } = useQuery({
  queryKey: ['users', { page, filters }],
  queryFn: () => fetchUsers({ page, filters }),
  staleTime: 5 * 60 * 1000,
});

const mutation = useMutation({
  mutationFn: createUser,
  onSuccess: () => queryClient.invalidateQueries({ queryKey: ['users'] }),
});

Zustand: Slice Pattern

export const useAuthStore = create<AuthState>((set) => ({
  user: null,
  token: null,
  login: async (credentials) => {
    const { user, token } = await authApi.login(credentials);
    set({ user, token });
  },
  logout: () => set({ user: null, token: null }),
}));