Research React 19 Patterns

Use this skill when you need to:

• Learn about React 19 new features (Actions, useOptimistic, use())
• Find hook implementation patterns
• Research component composition patterns
• Understand performance optimization techniques
• Learn about Suspense and error boundaries

Process

1. Identify React Topic

   • Which React feature or pattern?
   • New React 19 features or established patterns?
   • Performance, state management, or component design?

2. Search Documentation (Ref)

   Copy

   Query patterns:
   - "React 19 [feature name]"
   - "React useOptimistic hook"
   - "React Actions form handling"
   - "React Suspense streaming"
   

3. Find Real Implementations (Exa)

   Copy

   Query patterns:
   - "React 19 useOptimistic implementation example"
   - "React Actions form submission error handling"
   - "React use hook Promise example"
   - "React Suspense data fetching pattern"
   

4. Compare with Project Patterns

   • How does this fit with Next.js 15 Server Components?
   • Does this align with project standards?
   • Are there type safety considerations?

React 19 Specific Research

Actions

// Documentation
Query: "React 19 Actions form handling"

// Code examples
Query: "React 19 useActionState form submission pending state example"

useOptimistic

// Documentation
Query: "React useOptimistic hook optimistic updates"

// Code examples
Query: "React useOptimistic todo list real-time updates implementation"

use() Hook

// Documentation
Query: "React use hook Promise Context"

// Code examples
Query: "React use hook async data fetching Suspense boundary example"

Server Components Integration

// Documentation
Query: "React Server Components async await"

// Code examples
Query: "Next.js React Server Component database query example"

Common Research Topics

Hooks

• useState with complex state
• useEffect cleanup patterns
• useMemo optimization
• useCallback dependencies
• Custom hooks design

Performance

• React.memo usage
• Code splitting with lazy
• Virtual list implementations
• Debouncing and throttling

Patterns

• Compound components
• Render props
• Higher-order components
• Context patterns
• Error boundaries

Output Format

Provide:

1. Feature explanation - What it does and when to use it
2. Code examples - From Exa, showing real usage
3. Type definitions - TypeScript patterns from examples
4. Integration notes - How it works with Next.js/project stack
5. Best practices - Dos and don'ts from documentation
6. Common mistakes - What to avoid based on examples

When to Use

• Implementing new React 19 features
• Refactoring existing components
• Performance optimization
• Learning new patterns
• Debugging React-specific issues
• Before code reviews

Example Session

User: "How do I use React 19 Actions for form submission?"