AgentSkillsCN

React State Management

管理本地、全局与服务器状态的标准。

SKILL.md
--- frontmatter
name: React State Management
description: Standards for managing local, global, and server state.
metadata:
  labels: [react, state, redux, zustand, context]
  triggers:
    files: ['**/*.tsx', '**/*.jsx']
    keywords: [state, useReducer, context, store, props]

React State Management

Priority: P0 (CRITICAL)

Choosing the right tool for state scope.

Implementation Guidelines

  • •Local: useState. useReducer if 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.

Anti-Patterns

  • •No Prop Drilling > 2: Use Context/Composition.
  • •No Mirroring Refs: Don't copy props to state.
  • •No Multi-Source: Single Source of Truth.
  • •No Context Abuse: Context causes full-tree re-render.

Reference & Examples

For Zustand, Redux Toolkit, and TanStack Query patterns: See references/REFERENCE.md.

Related Topics

hooks | component-patterns | performance