React Expert

Component Structure

• Use functional components over class components
• Keep components small and focused
• Extract reusable logic into custom hooks
• Use composition over inheritance
• Implement proper prop types with TypeScript
• Split large components into smaller, focused ones

Hooks

• Follow the Rules of Hooks
• Use custom hooks for reusable logic
• Keep hooks focused and simple
• Use appropriate dependency arrays in useEffect
• Implement cleanup in useEffect when needed
• Avoid nested hooks

State Management

• Use useState for local component state
• Implement useReducer for complex state logic
• Use Context API for shared state
• Keep state as close to where it’s used as possible
• Avoid prop drilling through proper state management
• Use state management libraries only when necessary

Performance

• Implement proper memoization (useMemo, useCallback)
• Use React.memo for expensive components
• Avoid unnecessary re-renders
• Implement proper lazy loading
• Use proper key props in lists
• Profile and optimize render performance

React 19 Features

• Use use hook for consuming Promises and Context directly
• Leverage useFormStatus hook for form state management
• Use useActionState for form actions and state management
• Implement Document Metadata API for better SEO
• Use Actions for client-side mutations with automatic loading states
• Leverage compiler optimizations like automatic memoization
• Use ref as a prop directly without needing forwardRef
• Use useOptimistic hook for optimistic UI updates
• Use startTransition for non-urgent state updates
• Use useDeferredValue for deferring UI updates
• Use useId for generating unique IDs in server components
• Use useSyncExternalStore for subscribing to external stores

Radix UI & Shadcn

• Implement Radix UI components according to documentation
• Follow accessibility guidelines for all components
• Use Shadcn UI conventions for styling
• Compose primitives for complex components

Forms

• Use controlled components for form inputs
• Implement proper form validation
• Handle form submission states properly
• Show appropriate loading and error states
• Use form libraries for complex forms
• Implement proper accessibility for forms

Error Handling

• Implement Error Boundaries
• Handle async errors properly
• Show user-friendly error messages
• Implement proper fallback UI
• Log errors appropriately

Testing

• Write unit tests for components
• Implement integration tests for complex flows
• Use React Testing Library
• Test user interactions
• Test error scenarios

Accessibility

• Use semantic HTML elements
• Implement proper ARIA attributes
• Ensure keyboard navigation
• Test with screen readers
• Handle focus management
• Provide proper alt text for images

Templates

interface {{Name}}Props { className?: string children?: React.ReactNode }

export const {{Name}} = memo<{{Name}}Props>(({ className, children }) => { return (

{{Name}}.displayName = ‘{{Name}}’

interface Use{{Name}}Result { data: {{Type}} | null loading: boolean error: Error | null refresh: () => void }

export function use{{Name}}(): Use{{Name}}Result { const [data, setData] = useState<{{Type}} | null>(null) const [loading, setLoading] = useState(true) const [error, setError] = useState<Error | null>(null)

const fetchData = useCallback(async () => { try { setLoading(true) setError(null) // Add fetch logic here } catch (err) { setError(err instanceof Error ? err : new Error(‘Unknown error’)) } finally { setLoading(false) } }, [])

useEffect(() => { fetchData() }, [fetchData])

return { data, loading, error, refresh: fetchData } }

Validation

Memory Protocol (MANDATORY)

Before starting:

cat .claude/context/memory/learnings.md

After completing: Record any new patterns or exceptions discovered.

ASSUME INTERRUPTION: Your context may reset. If it’s not in memory, it didn’t happen.