# 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. ```typescript // ✅ React 19 - ref as prop type InputProps = { ref?: React.Ref; label: string; } & React.ComponentPropsWithoutRef; export function Input({ ref, label, ...props }: InputProps) { return ( ); } // Usage function Form() { const inputRef = useRef(null); return ( inputRef.current?.focus()}>Focus ); } ``` ```typescript // ❌ Old pattern (still works, but unnecessary) import { forwardRef } from 'react'; type InputProps = { label: string; } & React.ComponentPropsWithoutRef; export const Input = forwardRef( ({ label, ...props }, ref) => { return ( ); } ); Input.displayName = 'Input'; ``` ### Generic Components with ref ```typescript type SelectProps = { ref?: React.Ref; options: T[]; value: T; onChange: (value: T) => void; getLabel: (option: T) => string; }; export function Select({ ref, options, value, onChange, getLabel }: SelectProps) { return ( { const selected = options.find((opt) => getLabel(opt) === e.target.value); if (selected) onChange(selected); }} > {options.map((opt) => ( {getLabel(opt)} ))} ); } ``` ### Combining ref with Other Props ```typescript type ButtonProps = { ref?: React.Ref; variant?: 'primary' | 'secondary'; size?: 'sm' | 'md' | 'lg'; } & React.ComponentPropsWithoutRef; export function Button({ ref, variant = 'primary', size = 'md', className, children, ...props }: ButtonProps) { return ( {children} ); } ``` ## useActionState - Form State Management Replaces useFormState — manages form submission state with Server Actions. ```typescript 'use client'; import { useActionState } from 'react'; type FormState = { success?: boolean; errors?: Record; message?: string; }; type FormData = { email: string; password: string; }; // Server Action async function login( prevState: FormState, formData: FormData ): Promise { '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( login, {} // Initial state ); return ( {state.message && ( )} {isPending ? 'Logging in...' : 'Log In'} ); } ``` ### useActionState with Optimistic Updates ```typescript 'use client'; import { useActionState, useOptimistic } from 'react'; type Todo = { id: string; title: string; completed: boolean }; async function toggleTodo( prevState: { todos: Todo[] }, formData: FormData ): Promise { '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 (

{optimisticTodos.map((todo) => (
• { setOptimisticTodos(todo.id); formAction(formData); }} > {todo.completed ? '✓' : '○'} {todo.title}
))}

); } ``` ## use() Hook - Unwrapping Resources use() unwraps promises and context — enables new patterns for data fetching. ### use() with Promises ```typescript // Server Component async function UserPage({ params }: { params: { id: string } }) { // Pass promise without awaiting const userPromise = fetchUser(params.id); return ( <Suspense fallback={}> ); } // Client Component 'use client'; import { use } from 'react'; type UserProfileProps = { userPromise: Promise; }; export function UserProfile({ userPromise }: UserProfileProps) { // Suspends until resolved const user = use(userPromise); return ( ); } ``` ### Conditional use() use() can be called conditionally — unlike hooks. ```typescript 'use client'; import { use } from 'react'; type Props = { userPromise?: Promise; 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 ; return ; } ``` ### use() in Loops ```typescript 'use client'; import { use } from 'react'; type Props = { userPromises: Promise[]; }; export function UserList({ userPromises }: Props) { return (

{userPromises.map((promise, index) => { const user = use(promise); // use() in loop - allowed! return
• {user.name}
; })}

); } ``` ### use() with Context Alternative to useContext — can be called conditionally. ```typescript import { createContext, use } from 'react'; type Theme = 'light' | 'dark'; const ThemeContext = createContext('light'); export function ThemedComponent({ override }: { override?: Theme }) { let theme: Theme; if (override) { theme = override; } else { theme = use(ThemeContext); // Conditional context access } return ; } ``` ## useOptimistic - Optimistic UI Updates Show immediate UI feedback before server confirms. ```typescript '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 ( ); } ``` ### useOptimistic with State Updates ```typescript '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 (

{optimisticItems.map((item) => (
• {item.name} updateQuantity(item.id, item.quantity - 1)}> - {item.quantity} updateQuantity(item.id, item.quantity + 1)}> +
))}

); } ``` ## useTransition - Non-Blocking Updates Mark state updates as non-urgent — UI stays responsive. ```typescript 'use client'; import { useTransition, useState } from 'react'; export function SearchResults() { const [query, setQuery] = useState(''); const [results, setResults] = useState([]); 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 ( ); } ``` ### useTransition with Server Actions ```typescript '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 ( {isPending ? 'Deleting...' : 'Delete'} ); } ``` ## useDeferredValue - Deferred Rendering Defer expensive re-renders while keeping UI responsive. ```typescript 'use client'; import { useDeferredValue, useState } from 'react'; export function ProductSearch() { const [query, setQuery] = useState(''); const deferredQuery = useDeferredValue(query); return ( ); } function ExpensiveResults({ query }: { query: string }) { const results = useMemo(() => { // Expensive filtering/sorting return products.filter((p) => p.name.includes(query)); }, [query]); return (

{results.map((result) => (
• {result.name}
))}

); } ``` ## 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