tools-only React 19 TypeScript Patterns
React 19 introduces breaking changes and new APIs requiring updated TypeScript patterns.
ref as Prop (No More forwardRef)
React 19 allows ref as regular prop — forwardRef deprecated but still works.
// ✅ React 19 - ref as prop
type InputProps = {
ref?: React.Ref<HTMLInputElement>;
label: string;
} & React.ComponentPropsWithoutRef<'input'>;
export function Input({ ref, label, ...props }: InputProps) {
return (
<div>
<label>{label}</label>
<input ref={ref} {...props} />
</div>
);
}
// Usage
function Form() {
const inputRef = useRef<HTMLInputElement>(null);
return (
<form>
<Input ref={inputRef} label="Name" />
<button => inputRef.current?.focus()}>Focus</button>
</form>
);
}
// ❌ Old pattern (still works, but unnecessary)
import { forwardRef } from 'react';
type InputProps = {
label: string;
} & React.ComponentPropsWithoutRef<'input'>;
export const Input = forwardRef<HTMLInputElement, InputProps>(
({ label, ...props }, ref) => {
return (
<div>
<label>{label}</label>
<input ref={ref} {...props} />
</div>
);
}
);
Input.displayName = 'Input';
Generic Components with ref
type SelectProps<T> = {
ref?: React.Ref<HTMLSelectElement>;
options: T[];
value: T;
onChange: (value: T) => void;
getLabel: (option: T) => string;
};
export function Select<T>({ ref, options, value, onChange, getLabel }: SelectProps<T>) {
return (
<select
ref={ref}
value={getLabel(value)}
=> {
const selected = options.find((opt) => getLabel(opt) === e.target.value);
if (selected) onChange(selected);
}}
>
{options.map((opt) => (
<option key={getLabel(opt)} value={getLabel(opt)}>
{getLabel(opt)}
</option>
))}
</select>
);
}
Combining ref with Other Props
type ButtonProps = {
ref?: React.Ref<HTMLButtonElement>;
variant?: 'primary' | 'secondary';
size?: 'sm' | 'md' | 'lg';
} & React.ComponentPropsWithoutRef<'button'>;
export function Button({
ref,
variant = 'primary',
size = 'md',
className,
children,
...props
}: ButtonProps) {
return (
<button
ref={ref}
className={`btn btn-${variant} btn-${size} ${className || ''}`}
{...props}
>
{children}
</button>
);
}
useActionState - Form State Management
Replaces useFormState — manages form submission state with Server Actions.
'use client';
import { useActionState } from 'react';
type FormState = {
success?: boolean;
errors?: Record<string, string[]>;
message?: string;
};
type FormData = {
email: string;
password: string;
};
// Server Action
async function login(
prevState: FormState,
formData: FormData
): Promise<FormState> {
'use server';
const email = formData.get('email');
const password = formData.get('password');
if (!email || typeof email !== 'string') {
return {
success: false,
errors: { email: ['Email is required'] },
};
}
if (!password || typeof password !== 'string') {
return {
success: false,
errors: { password: ['Password is required'] },
};
}
try {
await signIn(email, password);
return { success: true, message: 'Logged in successfully' };
} catch (error) {
return {
success: false,
message: 'Invalid credentials',
};
}
}
// Client Component
export function LoginForm() {
const [state, formAction, isPending] = useActionState<FormState, FormData>(
login,
{} // Initial state
);
return (
<form action={formAction}>
<div>
<label htmlFor="email">Email</label>
<input
id="email"
name="email"
type="email"
required
aria-invalid={!!state.errors?.email}
/>
{state.errors?.email?.map((error) => (
<p key={error} className="error">{error}</p>
))}
</div>
<div>
<label htmlFor="password">Password</label>
<input
id="password"
name="password"
type="password"
required
aria-invalid={!!state.errors?.password}
/>
{state.errors?.password?.map((error) => (
<p key={error} className="error">{error}</p>
))}
</div>
{state.message && (
<div className={state.success ? 'success' : 'error'}>
{state.message}
</div>
)}
<button type="submit" disabled={isPending}>
{isPending ? 'Logging in...' : 'Log In'}
</button>
</form>
);
}
useActionState with Optimistic Updates
'use client';
import { useActionState, useOptimistic } from 'react';
type Todo = { id: string; title: string; completed: boolean };
async function toggleTodo(
prevState: { todos: Todo[] },
formData: FormData
): Promise<{ todos: Todo[] }> {
'use server';
const todoId = formData.get('todoId') as string;
await db.todo.update({
where: { id: todoId },
data: { completed: { toggle: true } },
});
const todos = await db.todo.findMany();
return { todos };
}
export function TodoList({ initialTodos }: { initialTodos: Todo[] }) {
const [state, formAction] = useActionState(
toggleTodo,
{ todos: initialTodos }
);
const [optimisticTodos, setOptimisticTodos] = useOptimistic(
state.todos,
(currentTodos, todoId: string) =>
currentTodos.map((todo) =>
todo.id === todoId ? { ...todo, completed: !todo.completed } : todo
)
);
return (
<ul>
{optimisticTodos.map((todo) => (
<li key={todo.id}>
<form
action={(formData) => {
setOptimisticTodos(todo.id);
formAction(formData);
}}
>
<input type="hidden" name="todoId" value={todo.id} />
<button type="submit">
{todo.completed ? '✓' : '○'} {todo.title}
</button>
</form>
</li>
))}
</ul>
);
}
use() Hook - Unwrapping Resources
use() unwraps promises and context — enables new patterns for data fetching.
use() with Promises
// Server Component
async function UserPage({ params }: { params: { id: string } }) {
// Pass promise without awaiting
const userPromise = fetchUser(params.id);
return (
<Suspense fallback={<UserSkeleton />}>
<UserProfile userPromise={userPromise} />
</Suspense>
);
}
// Client Component
'use client';
import { use } from 'react';
type UserProfileProps = {
userPromise: Promise<User>;
};
export function UserProfile({ userPromise }: UserProfileProps) {
// Suspends until resolved
const user = use(userPromise);
return (
<div>
<h1>{user.name}</h1>
<p>{user.email}</p>
</div>
);
}
Conditional use()
use() can be called conditionally — unlike hooks.
'use client';
import { use } from 'react';
type Props = {
userPromise?: Promise<User>;
userId?: string;
};
export function UserDisplay({ userPromise, userId }: Props) {
let user: User | undefined;
if (userPromise) {
user = use(userPromise); // Conditional use() - allowed!
} else if (userId) {
// Fetch inline
user = use(fetchUser(userId));
}
if (!user) return <div>No user data</div>;
return <div>{user.name}</div>;
}
use() in Loops
'use client';
import { use } from 'react';
type Props = {
userPromises: Promise<User>[];
};
export function UserList({ userPromises }: Props) {
return (
<ul>
{userPromises.map((promise, index) => {
const user = use(promise); // use() in loop - allowed!
return <li key={user.id}>{user.name}</li>;
})}
</ul>
);
}
use() with Context
Alternative to useContext — can be called conditionally.
import { createContext, use } from 'react';
type Theme = 'light' | 'dark';
const ThemeContext = createContext<Theme>('light');
export function ThemedComponent({ override }: { override?: Theme }) {
let theme: Theme;
if (override) {
theme = override;
} else {
theme = use(ThemeContext); // Conditional context access
}
return <div className={theme}>Content</div>;
}
useOptimistic - Optimistic UI Updates
Show immediate UI feedback before server confirms.
'use client';
import { useOptimistic } from 'react';
type Message = { id: string; text: string; sending?: boolean };
export function MessageThread({ messages }: { messages: Message[] }) {
const [optimisticMessages, addOptimisticMessage] = useOptimistic(
messages,
(state, newMessage: Message) => [...state, newMessage]
);
async function sendMessage(formData: FormData) {
const text = formData.get('message') as string;
// Add optimistic message immediately
addOptimisticMessage({ id: 'temp', text, sending: true });
// Send to server
await fetch('/api/messages', {
method: 'POST',
body: JSON.stringify({ text }),
});
}
return (
<div>
<ul>
{optimisticMessages.map((msg) => (
<li key={msg.id} className={msg.sending ? 'opacity-50' : ''}>
{msg.text}
</li>
))}
</ul>
<form action={sendMessage}>
<input name="message" required />
<button type="submit">Send</button>
</form>
</div>
);
}
useOptimistic with State Updates
'use client';
import { useOptimistic, useState, useTransition } from 'react';
type Item = { id: string; name: string; quantity: number };
export function ShoppingCart({ items: initialItems }: { items: Item[] }) {
const [items, setItems] = useState(initialItems);
const [isPending, startTransition] = useTransition();
const [optimisticItems, updateOptimistic] = useOptimistic(
items,
(state, { id, quantity }: { id: string; quantity: number }) =>
state.map((item) =>
item.id === id ? { ...item, quantity } : item
)
);
async function updateQuantity(id: string, quantity: number) {
// Optimistic update
updateOptimistic({ id, quantity });
// Server update
startTransition(async () => {
const updated = await fetch(`/api/cart/${id}`, {
method: 'PATCH',
body: JSON.stringify({ quantity }),
}).then((r) => r.json());
setItems(updated);
});
}
return (
<ul>
{optimisticItems.map((item) => (
<li key={item.id}>
{item.name}
<button => updateQuantity(item.id, item.quantity - 1)}>
-
</button>
<span>{item.quantity}</span>
<button => updateQuantity(item.id, item.quantity + 1)}>
+
</button>
</li>
))}
</ul>
);
}
useTransition - Non-Blocking Updates
Mark state updates as non-urgent — UI stays responsive.
'use client';
import { useTransition, useState } from 'react';
export function SearchResults() {
const [query, setQuery] = useState('');
const [results, setResults] = useState<string[]>([]);
const [isPending, startTransition] = useTransition();
function handleSearch(value: string) {
setQuery(value); // Urgent - update input immediately
startTransition(() => {
// Non-urgent - can be interrupted
const filtered = hugeDataset.filter((item) =>
item.toLowerCase().includes(value.toLowerCase())
);
setResults(filtered);
});
}
return (
<div>
<input
type="text"
value={query}
=> handleSearch(e.target.value)}
placeholder="Search..."
/>
{isPending && <div>Searching...</div>}
<ul>
{results.map((result) => (
<li key={result}>{result}</li>
))}
</ul>
</div>
);
}
useTransition with Server Actions
'use client';
import { useTransition } from 'react';
import { deletePost } from '@/actions/posts';
export function DeleteButton({ postId }: { postId: string }) {
const [isPending, startTransition] = useTransition();
function handleDelete() {
startTransition(async () => {
await deletePost(postId);
// UI stays responsive during deletion
});
}
return (
<button disabled={isPending}>
{isPending ? 'Deleting...' : 'Delete'}
</button>
);
}
useDeferredValue - Deferred Rendering
Defer expensive re-renders while keeping UI responsive.
'use client';
import { useDeferredValue, useState } from 'react';
export function ProductSearch() {
const [query, setQuery] = useState('');
const deferredQuery = useDeferredValue(query);
return (
<div>
<input
type="text"
value={query}
=> setQuery(e.target.value)}
placeholder="Search products..."
/>
{/* Uses deferred value - won't block input */}
<ExpensiveResults query={deferredQuery} />
</div>
);
}
function ExpensiveResults({ query }: { query: string }) {
const results = useMemo(() => {
// Expensive filtering/sorting
return products.filter((p) => p.name.includes(query));
}, [query]);
return (
<ul>
{results.map((result) => (
<li key={result.id}>{result.name}</li>
))}
</ul>
);
}
Migration Checklist
Updating from React 18 to React 19:
- Replace forwardRef with ref as prop
- Replace useFormState with useActionState
- Update Server Action types to include prevState parameter
- Use use() for promises in Server Components
- Add 'use server' directive to Server Actions
- Add 'use client' directive to Client Components
- Update TypeScript to 5.0+ for better React 19 support
- Update @types/react to 19.x
- Test all forms with useActionState
- Verify ref forwarding works without forwardRef