React Component Best Practices

General Guidelines

Use functional components with hooks instead of class components
Keep components small and focused on a single responsibility
Use TypeScript for type safety
Implement proper error boundaries
Use memo() for expensive computations

Component Structure

tsx

// Good example
export function UserCard({ user }: UserCardProps) {
  const [isExpanded, setIsExpanded] = useState(false);
  
  return (
    <div className="user-card">
      <h3>{user.name}</h3>
      {isExpanded && <UserDetails user={user} />}
    </div>
  );
}

Performance

Avoid inline functions in JSX
Use useMemo and useCallback appropriately
Implement virtual scrolling for long lists
Lazy load heavy components

Accessibility

Always provide meaningful aria-labels
Ensure keyboard navigation works
Use semantic HTML elements
Test with screen readers

React Component Best Practices

General Guidelines

Use functional components with hooks instead of class components
Keep components small and focused on a single responsibility
Use TypeScript for type safety
Implement proper error boundaries
Use memo() for expensive computations

Component Structure

tsx

// Good example
export function UserCard({ user }: UserCardProps) {
  const [isExpanded, setIsExpanded] = useState(false);
  
  return (
    <div className="user-card">
      <h3>{user.name}</h3>
      {isExpanded && <UserDetails user={user} />}
    </div>
  );
}

Performance

Avoid inline functions in JSX
Use useMemo and useCallback appropriately
Implement virtual scrolling for long lists
Lazy load heavy components

Accessibility

Always provide meaningful aria-labels
Ensure keyboard navigation works
Use semantic HTML elements
Test with screen readers

React Component Best Practices

React Component Best Practices

General Guidelines

Component Structure

Performance

Accessibility

Tags

Related Instructions

Python Docstring Standards

API Route Security

TypeScript Error Handling

WordPress Development — Copilot Instructions

VueJS 3 Development Instructions

TypeScript MCP Server Development

React Component Best Practices

General Guidelines

Component Structure

Performance

Accessibility