> react-state-management
Standards for managing local, global, and server state. Use when choosing or implementing state management (Context, Zustand, Redux, React Query) in React. (triggers: **/*.tsx, **/*.jsx, state, useReducer, context, store, props)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/react-state-management?format=md"React State Management
Priority: P0 (CRITICAL)
Choosing the right tool for state scope.
Implementation Guidelines
- Local:
useState.useReducerif complex (state machine). - Derived:
const fullName = first + last. No state sync. - Context: DI, Theming, Auth. Not for high-freq data.
- Global: Zustand/Redux for app-wide complex flow.
- Server Cache: Use
React.cache(RSC) to dedupe requests per render. - Server State: React Query / SWR / Apollo. Cache != UI State.
- URL: Store filter/sort params in URL (Source of Truth).
- Immutability: Never mutate. Use spread or Immer. Use
useMemoon context value to prevent unnecessary re-renders (primitive performance tuning belongs inhooksskill).
Boundary note:
hooksskill covers primitive API usage (useMemo,useCallbackrules). This skill covers architectural state decisions — which tool to use for which state scope.
Reference & Examples
For Zustand, Redux Toolkit, and TanStack Query patterns: See references/REFERENCE.md.
Related Topics
hooks | component-patterns | performance
🚫 Anti-Patterns
- Do NOT use standard patterns if specific project rules exist.
- Do NOT ignore error handling or edge cases.
> related_skills --same-repo
> typescript-tooling
Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)
> typescript-security
Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)
> typescript-language
Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)
> typescript-best-practices
Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)