component-development

React TypeScript Component Excellence

Modern Component Architecture

• Functional Components: Use React hooks for state and lifecycle management
• TypeScript Integration: Comprehensive type safety with proper interface definitions
• Performance Optimization: Implement useMemo, useCallback, and React.memo strategically
• Accessibility First: Built-in ARIA support and keyboard navigation

Component Structure Best Practices

import React, { useState, useCallback, useMemo, ReactNode } from 'react'
import { clsx } from 'clsx'

// ✅ Define comprehensive prop interfaces
interface ButtonProps {
  children: ReactNode
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost'
  size?: 'sm' | 'md' | 'lg'
  disabled?: boolean
  loading?: boolean
  onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void
  type?: 'button' | 'submit' | 'reset'
  className?: string
  'data-testid'?: string
}

// ✅ Modern functional component with comprehensive TypeScript
export const Button: React.FC<ButtonProps> = ({
  children,
  variant = 'primary',
  size = 'md',
  disabled = false,
  loading = false,
  onClick,
  type = 'button',
  className,
  'data-testid': testId,
  ...rest
}) => {
  // ✅ Memoized class computation for performance
  const buttonClasses = useMemo(() => clsx(
    'btn',
    `btn--${variant}`,
    `btn--${size}`,
    {
      'btn--disabled': disabled,
      'btn--loading': loading,
    },
    className
  ), [variant, size, disabled, loading, className])

  // ✅ Optimized event handler
  const handleClick = useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
    if (disabled || loading) {
      event.preventDefault()
      return
    }
    onClick?.(event)
  }, [disabled, loading, onClick])

  return (
    <button
      type={type}
      className={buttonClasses}
      onClick={handleClick}
      disabled={disabled || loading}
      aria-disabled={disabled || loading}
      aria-busy={loading}
      data-testid={testId}
      {...rest}
    >
      {loading && (
        <span className="btn__spinner" aria-hidden="true">
          <LoadingSpinner size="sm" />
        </span>
      )}
      <span className={loading ? 'btn__content--loading' : 'btn__content'}>
        {children}
      </span>
    </button>
  )
}