TypeScript Best Practices for React Applications

TypeScript has become an essential tool for React development, providing type safety and better developer experience. Let's explore the best practices for using TypeScript in React applications.

Component Props Typing

Always define proper types for your component props:

interface ButtonProps {
  children: React.ReactNode
  variant?: 'primary' | 'secondary'
  size?: 'sm' | 'md' | 'lg'
  onClick?: () => void
  disabled?: boolean
}

export function Button({ 
  children, 
  variant = 'primary', 
  size = 'md',
  onClick,
  disabled = false 
}: ButtonProps) {
  return (
    
      className={`btn btn-${variant} btn-${size}`}
      onClick={onClick}
      disabled={disabled}
    >
      {children}
    
  )
}

State Management

Use proper typing for state:

interface User {
  id: number
  name: string
  email: string
}

function UserList() {
  const [users, setUsers] = useState([])
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState(null)

  // Component logic...
}

Event Handlers

Type your event handlers correctly:

function Form() {
  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault()
    // Handle form submission
  }

  const handleInputChange = (event: React.ChangeEvent) => {
    const { name, value } = event.target
    // Handle input change
  }

  return (
    
      
    
  )
}

Custom Hooks

Create properly typed custom hooks:

interface UseApiResult {
  data: T | null
  loading: boolean
  error: string | null
}

function useApi(url: string): UseApiResult {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(true)
  const [error, setError] = useState(null)

  useEffect(() => {
    // Fetch data logic...
  }, [url])

  return { data, loading, error }
}

Generic Components

Create reusable generic components:

interface ListProps {
  items: T[]
  renderItem: (item: T) => React.ReactNode
  keyExtractor: (item: T) => string | number
}

function List({ items, renderItem, keyExtractor }: ListProps) {
  return (
    
      {items.map(item => (
        
          {renderItem(item)}
        
      ))}
    
  )
}

Utility Types

Leverage TypeScript's utility types:

interface User {
  id: number
  name: string
  email: string
  password: string
}

// Create a type without password for public display
type PublicUser = Omit

// Create a type for user creation (without id)
type CreateUser = Omit

// Create a partial type for updates
type UpdateUser = Partial>

Best Practices Summary

**Always type your props** - Define interfaces for component props
**Use strict TypeScript config** - Enable strict mode in tsconfig.json
**Avoid `any` type** - Use proper types instead of `any`
**Leverage utility types** - Use TypeScript's built-in utility types
**Type your hooks** - Properly type custom hooks and their return values

Conclusion

Following these TypeScript best practices will help you write more maintainable, type-safe React applications. Start implementing these patterns in your projects today!