22 — React + TypeScript Patterns

Type-safe React patterns for production applications. Covers component typing, generics, polymorphic components, and discriminated unions.

Essential Types

Type	Use
React.ReactNode	Anything renderable (string, number, JSX, null)
React.ReactElement	Only JSX elements
React.FC<Props>	Function component type (avoid — use plain functions)
React.ComponentProps<"button">	Extract props from HTML element
React.ComponentProps<typeof MyComp>	Extract props from component
React.CSSProperties	Inline style object
React.MouseEvent<HTMLButtonElement>	Typed event
React.ChangeEvent<HTMLInputElement>	Input change event
React.FormEvent<HTMLFormElement>	Form submit event

Best Practices

• ✅ Use plain functions (not React.FC) for components
• ✅ Use interface for props (extends well)
• ✅ Use discriminated unions for variant props
• ✅ Use generics for reusable components
• ❌ Avoid any — use unknown or generics

File

• react-typescript.tsx — prop patterns, generics, polymorphic components, discriminated unions, event typing, utility types