TypeScript Tips for React Developers

TypeScript has become an essential tool for React development, providing type safety and better developer experience. Here are some essential tips every React developer should know.

1. Proper Component Typing

interface ButtonProps {
  children: React.ReactNode
  onClick: () => void
  variant?: 'primary' | 'secondary'
  disabled?: boolean
}
const Button: React.FC = ({ 
  children, 
  onClick, 
  variant = 'primary', 
  disabled = false 
}) => {
  return (
          onClick={onClick} 
      disabled={disabled}
      className={btn btn-${variant}}
    >
      {children}
    
  )
}

2. State Management with TypeScript

When using useState with complex types, always be explicit:

interface User {
  id: number
  name: string
  email: string
}
const [user, setUser] = useState(null)

3. Event Handlers

Properly type your event handlers:

const handleInputChange = (e: React.ChangeEvent) => {
  setQuery(e.target.value)
}
const handleSubmit = (e: React.FormEvent) => {
  e.preventDefault()
  // Handle form submission
}

4. Generic Components

Create reusable components with generics:

interface ListProps {
  items: T[]
  renderItem: (item: T) => React.ReactNode
}
function List({ items, renderItem }: ListProps) {
  return (
    

      {items.map((item, index) => (
        
{renderItem(item)}

      ))}
    

  )
}

These patterns will help you write more maintainable and type-safe React applications.