react-frontend-patterns

What problem does it solve?

React projects often struggle with unclear state ownership, re-renders from global stores, and inconsistent data caching. This Skill provides a disciplined pattern for structuring frontends using per-feature Zustand stores and TanStack Query to keep concerns isolated and predictable.

Core Features & Use Cases

• One store per feature domain to confine state and minimize unnecessary renders.
• Selector-based access patterns to avoid broad re-renders and promote typed access.
• TanStack Query patterns for server data with stable query keys and invalidation strategies.
• Clear separation of concerns with provider setup, error boundaries, and page-level vs feature-level boundaries.
• Use Case: Implement a feature like Product List with route-level data fetching, feature widgets, and isolated error boundaries.

Quick Start

• Architect a React frontend using one Zustand store per feature and TanStack Query for all API data, with selectors and derived state.