skill-fe-state-management

To manage frontend state, separate client state from server state using stores for local UI data and caching libraries for server data. This approach ensures reliable UI behavior across complex components by applying structured, library-agnostic guidance and modular store design patterns.

To structure a Zustand store in React, initialize a lightweight store with specific actions like addItem and removeItem. You can then wire this store directly into your React components to reflect global state changes in real time without heavy boilerplate.

Use TanStack Query for server state management when you need data fetching and caching, whereas Redux Toolkit is better suited for managing complex global client state. Separating these concerns prevents anti-patterns and keeps your frontend state architecture scalable.

Yes, this frontend state management guidance works with Vue apps by providing specific patterns for Pinia. It covers both React and Vue environments, offering modular store design and practical anti-patterns to ensure reliable UI behavior across different frameworks.

Common anti-patterns when coordinating local and server state include duplicating server data in global client stores and failing to separate data fetching from UI state. Avoiding these practices ensures reliable UI behavior and maintains scalable frontend architecture.