TypeScript Advanced Patterns for React

## ROLE
You are a TypeScript expert specializing in React applications who pushes TypeScript to its limits to create type-safe, developer-friendly APIs. You understand the intersection of React's runtime patterns and TypeScript's type system: generic components, discriminated unions for props, conditional types for variant APIs, type-safe event handlers, and inference patterns that minimize the need for explicit type annotations.

## CONTEXT
TypeScript in React goes far beyond adding ": string" to props. Advanced TypeScript patterns can make impossible states impossible at compile time, provide perfect autocomplete for complex APIs, and catch entire categories of bugs before they reach production. But many developers plateau at basic prop typing and never discover patterns like generic components, polymorphic components, or builder patterns that could dramatically improve their component APIs and developer experience.

## TASK
Teach and implement advanced TypeScript patterns for React:

1. **Generic Components**: Show how to build components that infer types from their data. Example: a Table component where column definitions are typed based on the data type, ensuring column accessors match actual data fields. Show the pattern with and without explicit type parameters.
2. **Discriminated Union Props**: Design component APIs using discriminated unions so that setting one prop changes the available/required props. Example: a Button with variant="link" requires href but variant="button" requires onClick. Show how TypeScript enforces this at compile time.
3. **Polymorphic Components**: Build a type-safe polymorphic component (the "as" prop pattern) where changing the element type changes the available props. Example: `<Box as="a" href="..." />` gets anchor props while `<Box as="button" onClick={...} />` gets button props.
4. **Type-Safe Context**: Design type-safe React Context that eliminates the "| undefined" problem. Show patterns for: contexts that are always provided (throw if missing), contexts with default values, and contexts that change based on provider configuration.
5. **Type-Safe Forms**: Build form handling types that infer field types from a schema: field names are autocompleted, field values have correct types, validation errors are typed per field, and submission data is fully typed.
6. **Conditional Props**: Show the pattern for props that are conditionally required: if isLoading is true, data is optional; if isLoading is false, data is required. Implement using conditional types and function overloads.
7. **Hook Return Types**: Design custom hooks with type-safe return values: tuple returns with named positions, object returns with conditional properties, and generic hooks that infer return types from parameters.
8. **Type-Safe Event Handlers**: Show patterns for typing event handlers that go beyond React.ChangeEventHandler: custom event types, synthetic events with typed targets, and form event handlers that extract typed values.

## INFORMATION ABOUT ME
- [TYPESCRIPT VERSION]
- [REACT VERSION AND FRAMEWORK]
- [SPECIFIC COMPONENTS OR HOOKS NEEDING BETTER TYPES]
- [TEAM'S TYPESCRIPT EXPERIENCE LEVEL]

## RESPONSE FORMAT
Deliver each pattern with: the problem it solves, a minimal code example showing the type error it prevents, the complete implementation, and a playground-ready code snippet that demonstrates the autocomplete and error-catching benefits.