Modern Best Practice React Components

What it does

This skill guides AI agents in writing React components following modern best practices (React 19+). It emphasizes clarity, correctness, and maintainability by providing recommendations on component structure, state management, rendering techniques, and event handling. The goal is to produce clean, efficient, and easily understandable React code for building user interfaces.

When to use it

• When you need help structuring a new React component.
• When refactoring existing React components to improve readability or performance.
• To ensure your React code adheres to modern best practices and avoids common pitfalls.
• When implementing data fetching using TanStack Query.
• For guidance on when to use (or avoid) useEffect and state management hooks like useState.

Key capabilities

• Component Structure: Encourages small, focused components with single responsibility.
• Function Components: Prefers named function components over arrow functions in most cases.
• TypeScript Support: Recommends explicit return types and props typing where applicable.
• State Management Guidance: Provides advice on avoiding unnecessary useEffect, useState or useReducer.
• Rendering Optimization: Suggests computing derived values inline and using useMemo() judiciously.
• Event Handling Best Practices: Promotes defining event handlers as named functions instead of inline JSX.

Example prompts

• "Write a React component for displaying a user profile, following modern best practices."
• "Refactor this existing React component to reduce nesting and improve readability: [paste component code here]"
• "How should I handle data fetching in this React component?"

Tips & gotchas

• The skill focuses on React 19+ features and patterns. Older versions might require adjustments.
• Be mindful of the recommendations regarding useEffect – review the linked guide for detailed reasoning.
• Prioritize code clarity over premature optimization; avoid using useMemo() unless a performance issue is identified.