--- name: react-production-patterns description: Build production-ready React applications with performance optimization, code splitting, state management, and accessibility. Use for React components requiring optimization or complex state patterns. allowed-tools: - Read - Write - Edit - Bash --- # React Production Patterns ## Performance Optimization ```typescript import { memo, useMemo, useCallback } from 'react' \/\/ Memoized component const ExpensiveComponent = memo(({ data }) => { const processedData = useMemo(() => { return data.map(item => expensiveOperation(item)) }, [data]) const handleClick = useCallback(() => { \/\/ Handler logic }, []) return

{processedData}<\/div> }) ``` ## Code Splitting ```typescript import { lazy, Suspense } from 'react' const HeavyComponent = lazy(() => import('.\/HeavyComponent')) function App() { return ( Loading...<\/div>}> <\/Suspense> ) } ``` ## State Management (Zustand) ```typescript import { create } from 'zustand' interface Store { count: number increment: () => void } const useStore = create((set) => ({ count: 0, increment: () => set((state) => ({ count: state.count + 1 })), })) function Counter() { const { count, increment } = useStore() return