--- name: react-patterns description: Modern React patterns for React 19. Hooks, state management, component composition, performance optimization. Use when building React components. allowed-tools: Read, Write, Edit, Grep, Glob --- # React Patterns - Modern Component Architecture ## Purpose Expert guidance for React 19 patterns: - **Component Design** - Composition over inheritance - **State Management** - Local, context, and server state - **Performance** - Memoization and optimization - **Hooks** - Built-in and custom hooks - **TypeScript** - Proper typing patterns --- ## Component Patterns ### 1. Compound Components ```tsx \/\/ Composable API for complex UIs interface TabsContextValue { activeTab: string; setActiveTab: (id: string) => void; } const TabsContext = createContext(null); function Tabs({ children, defaultTab }: { children: ReactNode; defaultTab: string }) { const [activeTab, setActiveTab] = useState(defaultTab); return (

{children}<\/div> <\/TabsContext.Provider> ); } function TabList({ children }: { children: ReactNode }) { return (

{children} <\/div> ); } function Tab({ id, children }: { id: string; children: ReactNode }) { const context = useContext(TabsContext); if (!context) throw new Error('Tab must be used within Tabs'); return (