React Patterns Skill

React + TypeScript standards and best practices.

When to Apply

• Creating new React components
• Implementing custom hooks
• State management decisions
• Performance optimization
• Code review for React code

Component Standards

Component Structure Rules

Component Organization

Hook Standards

Built-in Hooks Usage

Custom Hook Guidelines

TypeScript Requirements

Type Import Rules

Props Typing Standards

Performance Standards

Memoization Guidelines

Re-render Prevention

Effect Guidelines

useEffect Rules

Common Effect Patterns

Event Handling Standards

Event Handler Naming

Event Types

File Organization

Directory Structure

src/
├── components/
│   ├── common/          # Shared/reusable components
│   ├── [feature]/       # Feature-specific components
│   └── layout/          # Layout components
├── hooks/
│   └── use[Name].ts     # Custom hooks
├── pages/
│   └── [Page].tsx       # Route pages
├── services/
│   └── [name]Service.ts # API services
├── stores/
│   └── [name]Store.ts   # Zustand stores
└── types/
    └── index.ts         # All type definitions

Anti-Patterns to Avoid

Code Review Checklist

Component Review

• Single responsibility principle followed
• Props interface defined with TypeScript
• No prop drilling beyond 2 levels
• Hooks at top level only
• Cleanup in useEffect where needed

Performance Review

• Expensive calculations memoized
• Callbacks memoized when passed to children
• No new objects/arrays created in render
• Keys are unique and stable

TypeScript Review

• import type used for type imports
• No any types
• Props properly typed
• Event handlers typed