react-dev

1# React TypeScript
2 
3Type-safe React = compile-time guarantees = confident refactoring.
4 
5<when_to_use>
6 
7- Building typed React components
8- Implementing generic components
9- Typing event handlers, forms, refs
10- Using React 19 features (Actions, Server Components, use())
11- Router integration (TanStack Router, React Router)
12- Custom hooks with proper typing
13 
14NOT for: non-React TypeScript, vanilla JS React
15 
16</when_to_use>
17 
18<react_19_changes>
19 
20React 19 breaking changes require migration. Key patterns:
21 
22**ref as prop** - forwardRef deprecated:
23 
24```typescript
25// React 19 - ref as regular prop
26type ButtonProps = {
27  ref?: React.Ref<HTMLButtonElement>;
28} & React.ComponentPropsWithoutRef<'button'>;
29 
30function Button({ ref, children, ...props }: ButtonProps) {
31  return <button ref={ref} {...props}>{children}</button>;
32}
33```
34 
35**useActionState** - replaces useFormState:
36 
37```typescript
38import { useActionState } from 'react';
39 
40type FormState = { errors?: string[]; success?: boolean };
41 
42function Form() {
43  const [state, formAction, isPending] = useActionState(submitAction, {});
44  return <form action={formAction}>...</form>;
45}
46```
47 
48**use()** - unwraps promises/context:
49 
50```typescript
51function UserProfile({ userPromise }: { userPromise: Promise<User> }) {
52  const user = use(userPromise); // Suspends until resolved
53  return <div>{user.name}</div>;
54}
55```
56 
57See [react-19-patterns.md](references/react-19-patterns.md) for useOptimistic, useTransition, migration checklist.
58 
59</react_19_changes>
60…