React Skill

React Skill

Loaded by: Frontend Division agents | Version: 1.0

Best Practices

Component Structure

• Use functional components with hooks (no class components)
• Keep components under 200 lines; one component per file
• Co-locate related files (component, styles, tests, types)

Hooks

• Custom hooks for reusable logic (prefix with use)
• useState for simple local state; useReducer for complex state
• useEffect cleanup to prevent memory leaks
• useMemo/useCallback only when measurably needed

Performance

• React.lazy for route-level code splitting
• React.memo for expensive pure components
• Avoid inline object/​array creation in JSX props
• Use stable keys in lists (never array index)

Pattern

interface UserCardProps {
  name: string;
  email: string;
  onEdit?: () => void;
}

const UserCard: React.FC<UserCardProps> = ({ name, email, onEdit }) => (
  <div className="user-card">
    <h3>{name}</​h3>
    <p>{email}</​p>
    {onEdit && <button onClick={onEdit}>Edit</​button>}
  </​div>
);

export default UserCard;

Anti-Patterns

• Do NOT use any type
• Do NOT mutate state directly
• Do NOT put business logic in components
• Do NOT use useEffect for derived state
• Do NOT create components inside render

Checklist

• Component is typed with TypeScript interfaces
• Props have sensible defaults
• No any types
• Effects have cleanup functions where needed
• Component is under 200 lines
• Error boundaries wrap risky components