TypeScript Patterns for React

TypeScript and React work beautifully together when you follow consistent patterns.

#Generic Components

type ListProps<T> = {
  items: T[]
  renderItem: (item: T) => React.ReactNode
}
 
function List<T>({ items, renderItem }: ListProps<T>) {
  return <ul>{items.map(renderItem)}</ul>
}

#Discriminated Unions for State

Use discriminated unions to model complex component state machines cleanly.