React & JavaScript Prompts: Component & Debugging Templates

Create a React component with these requirements:

COMPONENT: [COMPONENT NAME]
PURPOSE: [WHAT IT DOES]
PROPS: [LIST EXPECTED PROPS]

Requirements:
1. TypeScript with strict types
2. WCAG 2.1 AA accessibility
3. Keyboard navigation support
4. Proper ARIA attributes
5. CSS-in-JS or Tailwind (specify preference)

Generate:
1. Component code with TypeScript interfaces
2. Props documentation (JSDoc or comments)
3. Usage example
4. Accessibility checklist
5. Unit test skeleton

Follow patterns:
- Compound components for complex UI
- Controlled/uncontrolled modes
- ForwardRef for DOM access
- Error boundaries where appropriate

Create a custom React hook:

HOOK NAME: use[NAME]
PURPOSE: [WHAT IT MANAGES]
INPUTS: [PARAMETERS]
OUTPUTS: [RETURN VALUES]

Requirements:
1. Full TypeScript types
2. Handle loading/error states
3. Cleanup on unmount
4. Memoization where appropriate

Generate:
1. Hook implementation
2. TypeScript types/interfaces
3. Usage example in a component
4. Edge cases handled:
   - Race conditions
   - Stale closures
   - Memory leaks
5. Unit tests with React Testing Library

Patterns to follow:
- Return tuple [state, actions] or object
- Accept options object for flexibility
- Use useCallback for stable references
- Document dependencies clearly

Create a form component with validation:

FORM PURPOSE: [WHAT DATA IT COLLECTS]
FIELDS:
- [FIELD 1]: [TYPE] - [VALIDATION RULES]
- [FIELD 2]: [TYPE] - [VALIDATION RULES]
...

Generate using:
- React Hook Form OR Formik (specify)
- Zod OR Yup for schema validation
- TypeScript for type safety

Include:
1. Form component with all fields
2. Validation schema
3. Error display per field
4. Submit handler with loading state
5. Success/error feedback
6. Accessibility (labels, errors announced)
7. TypeScript types for form data

Handle:
- Real-time validation
- Async validation (e.g., email exists)
- Form reset
- Dirty state tracking

Help me debug this React error:

ERROR MESSAGE:
[PASTE ERROR]

COMPONENT CODE:
[PASTE RELEVANT CODE]

CONTEXT:
- React version: [VERSION]
- When it happens: [TRIGGER]
- Expected behavior: [WHAT SHOULD HAPPEN]

Analyze:
1. Root cause of the error
2. Why this specific error message
3. Common causes of this pattern
4. Step-by-step fix

Check for:
- Infinite re-renders
- Missing dependencies in useEffect
- Stale closure issues
- Incorrect hook usage
- State mutation
- Missing key props

Provide:
1. The fix with explanation
2. How to prevent this in future
3. Related issues to check for

Analyze this React component for performance:

COMPONENT CODE:
[PASTE CODE]

SYMPTOMS:
- [DESCRIBE LAG/SLOWNESS]
- When: [TRIGGER]

Analyze for:
1. Unnecessary re-renders
   - Missing React.memo
   - Inline object/function props
   - Context overuse
2. Heavy computations
   - Missing useMemo
   - Expensive calculations in render
3. Memory leaks
   - Cleanup in useEffect
   - Event listener management
4. Bundle size impact

Provide:
1. Specific issues found (line numbers)
2. Optimized code for each issue
3. Before/after comparison
4. Profiling steps to verify fix
5. When NOT to optimize (premature optimization)

Generate tests for this React component:

COMPONENT CODE:
[PASTE COMPONENT]

COMPONENT PURPOSE: [WHAT IT DOES]
KEY BEHAVIORS: [LIST MAIN FUNCTIONALITY]

Generate tests using:
- Jest + React Testing Library
- TypeScript

Include tests for:
1. Rendering without crashing
2. Props affecting output
3. User interactions (click, type, etc.)
4. Conditional rendering
5. Error states
6. Loading states
7. Accessibility (role, aria)

Test patterns:
- Arrange-Act-Assert structure
- User-centric queries (getByRole, getByText)
- Avoid implementation details
- Mock external dependencies
- Test edge cases

Provide:
1. Complete test file
2. Mock setup if needed
3. Comments explaining each test
4. Coverage recommendations

Generate integration tests for this component:

COMPONENT: [NAME]
API CALLS: [LIST ENDPOINTS USED]
DATA FLOW: [DESCRIBE HOW DATA IS FETCHED/USED]

Generate tests covering:
1. Successful data fetch
2. Loading state display
3. Error handling
4. Empty state
5. Retry logic (if applicable)
6. Cache behavior

Mock strategy:
- MSW (Mock Service Worker) preferred
- Or Jest mocks for fetch/axios

Test scenarios:
1. Happy path (data loads, displays correctly)
2. Network error
3. Server error (500)
4. Timeout
5. Partial data
6. User interaction after load

Provide:
1. Test file with all scenarios
2. MSW handlers
3. Test utilities/helpers
4. CI/CD considerations

Generate TypeScript types for:

CONTEXT: [WHAT YOU'RE TYPING]
DATA SHAPE: [DESCRIBE OR PASTE JSON EXAMPLE]

Requirements:
1. Strict types (no 'any')
2. Proper nullability
3. Discriminated unions where appropriate
4. Generic types if reusable

Generate:
1. Interface/Type definitions
2. Utility types if helpful
3. Type guards for runtime checks
4. Zod schema (for validation)
5. Usage examples

Consider:
- API response typing
- Form data typing
- State shape typing
- Event handler typing
- Ref typing

Best practices:
- Prefer interface for objects
- Use type for unions/primitives
- Document complex types
- Export from central types file

Help me fix this TypeScript error:

ERROR:
[PASTE TS ERROR]

CODE:
[PASTE RELEVANT CODE]

WHAT I'M TRYING TO DO:
[EXPLAIN INTENT]

Provide:
1. Why this error occurs
2. The correct type solution
3. Alternative approaches
4. When to use type assertion (safely)
5. Related patterns to know

Common issues to check:
- Missing null checks
- Incorrect generic usage
- Union type narrowing
- Readonly/mutable conflicts
- Import type issues

Show the fixed code with explanation.