# React Dev
> 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 Router, React Router). Use when this capability is needed.
- Skill: `tomevault-io/react-dev-5` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add tomevault-io/react-dev-5`
- Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/react-dev-5/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: tomevault-io (https://skillmd.com/u/tomevault-io)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/tomevault-io/react-dev-5
---
## When to use
- 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.
# React TypeScript
> **On-demand loading**: Read files from `references/` and `examples/` only when specific guidance is needed for the current step.
Type-safe React = compile-time guarantees = confident refactoring.
- 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
Key breaking changes — see [react-19-patterns.md](references/react-19-patterns.md) for full migration checklist:
- **ref as prop**: `forwardRef` deprecated; pass `ref` as a regular prop
- **useActionState**: replaces `useFormState` from react-dom
- **use()**: unwraps promises/context, triggers Suspense when unresolved
- **useOptimistic**: optimistic UI updates during async transitions
Key typing patterns — see references for full examples:
- **Props**: extend native elements with `ComponentPropsWithoutRef<'button'>`
- **Children**: use `ReactNode` (renderable), `ReactElement` (single element), render props for callbacks
- **Discriminated unions**: model variant props with `| { variant: 'link'; href: string }`
Use specific event types (not `any`) for accurate `currentTarget` typing:
- Mouse: `React.MouseEvent`
- Form submit: `React.FormEvent`
- Input change: `React.ChangeEvent`
- Keyboard: `React.KeyboardEvent`
See [event-handlers.md](references/event-handlers.md) for focus, drag, clipboard, touch, wheel events.
Key patterns — see [hooks.md](references/hooks.md) for useCallback, useMemo, useImperativeHandle:
- **useState**: explicit type for unions/null — `useState(null)`
- **useRef**: `null` initial for DOM refs; non-null for mutable values
- **useReducer**: discriminated union action types for exhaustive handling
- **Custom hooks**: return `[value, fn] as const` for correct tuple inference
- **useContext**: null guard + throw pattern for required context consumers
Generic components infer types from props — no manual annotations at call site.
- Use `keyof T` for column/field keys; render props for custom cell rendering
- Constrain with `T extends HasId` when a required base shape is needed
See [generic-components.md](examples/generic-components.md) for Table, Select, List, Modal, FormField patterns.
React 19 Server Components run on server, can be async — see [server-components.md](examples/server-components.md):
- **Async RSC**: `async function Page()` fetches directly, no useEffect
- **Server Actions**: `'use server'` directive, call `revalidatePath` after mutations
- **Client + Action**: `useActionState(serverAction, initialState)` wires form to action
- **use() handoff**: pass `Promise` from server to client; `use()` suspends until resolved
Both TanStack Router and React Router v7 provide type-safe routing:
- **TanStack Router**: compile-time safety, Zod `validateSearch`, file-based route tree
- **React Router v7**: auto-generated `+types/` from loaders/actions, Framework Mode
See [tanstack-router.md](references/tanstack-router.md) and [react-router.md](references/react-router.md).
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()
- [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
---
> Source: [kscius/KS-Cursor-Orchestrator](https://github.com/kscius/KS-Cursor-Orchestrator) — distributed by [TomeVault](https://tomevault.io).