pitfalls-reactlisted

# React Pitfalls Common pitfalls and correct patterns for React development. ## When to Use - Building React components - Implementing form validation - Adding error boundaries - Ensuring accessibility (a11y) - Creating responsive layouts - Reviewing React code ## Workflow ### Step 1: Check Component Patterns Verify loading/error states and data checks. ### Step 2: Verify Form Validation Ensure Zod schemas and proper error display. ### Step 3: Check Accessibility Verify ARIA labels and keyboard navigation. --- ## Component Patterns ```tsx // ✅ Define helpers before use or as exports function formatPrice(price: number) { ... } export default function Component() { // ✅ Check data exists before accessing if (!data) return <Loading />; // ✅ useEffect for side effects only useEffect(() => { fetchData(); }, []); // ✅ data-testid on interactive elements return <button data-testid="submit-btn">Submit</button>; } // ❌ WRONG: Defining function in render return <button onClick={() => { function doSomething() { } // Don't define here doSomething(); }}> // ✅ Navigation with router, not window import { Link, useLocation } from 'wouter'; <Link to="/dashboard">Go</Link> // ❌ window.location.href = '/dashboard' ``` ## Error Boundary ```tsx // ✅ Wrap major components in error boundaries class ErrorBoundary extends React.Component { state = { hasError: false, error: null }; static getDerivedStateFromError(error) { return { hasError: true, erro