This skill should be used when building React components with TypeScript, typing hooks, handling events, or when React TypeScript, React 19, Server Components are mentioned. Covers type-safe patterns for React 18-19 including generic components, proper event typing, and routing integration (TanStack

React TypeScript Type safe React = compile time guarantees = confident refactoring. <when to use Building typed React components Implementing generic components Typing event handlers, forms, refs Using React 19 features (Actions, Server Components, use()) Router integration (TanStack Router, React Router) Custom hooks with proper typing NOT for: non React TypeScript, vanilla JS React </when to use <react 19 changes React 19 breaking changes require migration. Key patterns: ref as prop forwardRef deprecated: useActionState replaces useFormState: use() unwraps promises/context: See [react 19 patterns.md](references/react 19 patterns.md) for useOptimistic, useTransition, migration checklist. </react 19 changes <component patterns Props extend native elements: Children typing : Discriminated unions for variant props: </component patterns <event handlers Use specific event types for accurate target typing: See [event handlers.md](references/event handlers.md) for focus, drag, clipboard, touch, wheel events. </event handlers <hooks typing useState explicit for unions/null: useRef null for DOM, value for mutable: useReducer discriminated unions for actions: Custom hooks tuple returns with as const: useContext null guard pattern: See [hooks.md](references/hooks.md) for useCallback, useMemo, useImperativeHandle, useSyncExternalStore. </hooks typing <generic components Generic components infer types from props no manual annotations at call site. Pattern keyof T for column keys, render props for custom rendering: Constrained generics for required properties: See [generic components.md](examples/generic components.md) for Select, List, Modal, FormField patterns. </generic components <server components React 19 Server Components run on server, can be async. Async data fetching : Server Actions 'use server' for mutations: Client + Server Action : use() for promise handoff : See [server components.md](examples/server components.md) for parallel fetching, streaming, error boundaries. </server components <routing Both TanStack Router and React Router v7 provide type safe routing solutions. TanStack Router Compile time type safety with Zod validation: React Router v7 Automatic type generation with Framework Mode: See [tanstack router.md](references/tanstack router.md) for TanStack patterns and [react router.md](references/react router.md) for React Router patterns. </routing <rules ALWAYS: Specific event types (MouseEvent, ChangeEvent, etc) Explicit useState for unions/null ComponentPropsWithoutRef for native element extension Discriminated unions for variant props as const for tuple returns ref as prop in React 19 (no forwardRef) useActionState for form actions Type safe routing patterns (see routing section) NEVER: any for event handlers JSX.Element for children (use ReactNode) forwardRef in React 19+ useFormState (deprecated) Forget null handling for DOM refs Mix Server/Client components in same file Await promises when passing to use() </rules <references [hooks.md](references/hooks.md) useState, useRef, useReducer, useContext, custom hooks [event handlers.md](references/event handlers.md) all event types, generic handlers [react 19 patterns.md](references/react 19 patterns.md) useActionState, use(), useOptimistic, migration [generic components.md](examples/generic components.md) Table, Select, List, Modal patterns [server components.md](examples/server components.md) async components, Server Actions, streaming [tanstack router.md](references/tanstack router.md) TanStack Router typed routes, search params, navigation [react router.md](references/react router.md) React Router v7 loaders, actions, type generation, forms </references

react-dev