moai-ref-react-patterns

What problem does it solve? Frontend developers often make inconsistent architectural decisions about component structure, state management, and data fetching in React and Next.js projects, leading to unmaintainable code, prop drilling, and misuse of useEffect for data fetching. ## Core Features & Use Cases - Component Design Patterns: Reference implementations for compound components, custom hooks, container/presentational separation, and headless components. - State Management Selection Guide: Decision flow for choosing between useState, React Query, Zustand, nuqs, and React Hook Form based on state type. - Quality Standards & Verification: Concrete checklists covering component size limits, error boundaries, accessibility requirements, and common rationalizations to avoid. - Use Case: When designing a new dashboard feature in a Next.js app, consult this reference to decide where server state versus client state lives, how to structure the route groups, and which performance patterns apply. ## Quick Start Ask the agent to design a React component structure for a dashboard feature using the patterns and state management guide from this reference.