React Patterns

Platform: Web and Mobile (shared React patterns). For React Native-specific patterns (Pressable, ScrollView, FlashList, safe areas), see the react-native-patterns skill.

Overview

Patterns for building maintainable React applications with TypeScript, leveraging React 19 features and composition patterns.

API Reference: Use Context7 MCP for full React API reference (mcp__context7__resolve-library-id → react ).

Workflows

• Choose appropriate component composition pattern

• Apply TypeScript types for props and events

• Implement custom hooks for shared logic

• Add performance optimizations where needed

• Handle loading and error states with Suspense/boundaries

• Validate component render behavior

Feedback Loops

• Components render without TypeScript errors

• Props are properly typed and validated

• Custom hooks have clear return types

• No unnecessary re-renders (use React DevTools Profiler)

• Error boundaries catch component errors

• Loading states work with Suspense

Reference Implementation

1. Component Composition

Compound Components

// Shares implicit state between parent and children const TabsContext = createContext<{ activeTab: string; setActiveTab: (id: string) => void } | null>(null);

function Tabs({ children, defaultTab }: { children: ReactNode; defaultTab: string }) { const [activeTab, setActiveTab] = useState(defaultTab); return <TabsContext.Provider value={{ activeTab, setActiveTab }}>{children}</TabsContext.Provider>; }

function Tab({ id, children }: { id: string; children: ReactNode }) { const ctx = use(TabsContext); if (!ctx) throw new Error('Tab must be used within Tabs'); return ( <button role="tab" aria-selected={ctx.activeTab === id} onClick={() => ctx.setActiveTab(id)}> {children} </button> ); }

Slot Pattern

// Named slots for flexible composition interface CardProps { header?: ReactNode; footer?: ReactNode; children: ReactNode; }

function Card({ header, footer, children }: CardProps) { return ( <div className="card"> {header && <div className="card-header">{header}</div>} <div className="card-body">{children}</div> {footer && <div className="card-footer">{footer}</div>} </div> ); }

2. React 19 Features

use() Hook

// Unwrap promises and context — simpler than useContext function UserProfile({ userPromise }: { userPromise: Promise<User> }) { const user = use(userPromise); // Suspends until resolved return <div>{user.name}</div>; }

useActionState

async function updateUser(prevState: { error?: string }, formData: FormData) { 'use server'; return { error: undefined }; }

function UserForm() { const [state, formAction, isPending] = useActionState(updateUser, {}); return ( <form action={formAction}> <input name="name" disabled={isPending} /> {state.error && <p className="error">{state.error}</p>} <button disabled={isPending}>{isPending ? 'Saving...' : 'Save'}</button> </form> ); }

useOptimistic

function TodoList({ todos }: { todos: Todo[] }) { const [optimisticTodos, addOptimisticTodo] = useOptimistic( todos, (state, newTodo: Todo) => [...state, newTodo] ); async function handleAdd(formData: FormData) { const todo = { id: crypto.randomUUID(), text: formData.get('text') as string }; addOptimisticTodo(todo); await saveTodo(todo); } return ( <form action={handleAdd}> {optimisticTodos.map(todo => <li key={todo.id}>{todo.text}</li>)} <input name="text" /><button>Add</button> </form> ); }

3. Custom Hooks

// Object return for multiple named values function useAuth() { const [user, setUser] = useState<User | null>(null); const [loading, setLoading] = useState(true); const login = async (credentials: Credentials) => { setUser(await api.login(credentials)); }; return { user, loading, login }; }

// Tuple return for positional access (like useState) function useToggle(initial = false): [boolean, () => void] { const [value, setValue] = useState(initial); return [value, useCallback(() => setValue(v => !v), [])]; }

// Composing hooks function useLocalStorage<T>(key: string, initial: T) { const [value, setValue] = useState<T>(() => { const stored = localStorage.getItem(key); return stored ? JSON.parse(stored) : initial; }); useEffect(() => { localStorage.setItem(key, JSON.stringify(value)); }, [key, value]); return [value, setValue] as const; }

4. TypeScript + React

// Extend HTML element props interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: 'primary' | 'secondary'; loading?: boolean; } function Button({ variant = 'primary', loading, children, ...props }: ButtonProps) { return <button className={variant} disabled={loading} {...props}>{loading ? 'Loading...' : children}</button>; }

// Generic components with full type inference interface ListProps<T> { items: T[]; renderItem: (item: T) => ReactNode; keyExtractor: (item: T) => string; } function List<T>({ items, renderItem, keyExtractor }: ListProps<T>) { return <ul>{items.map(item => <li key={keyExtractor(item)}>{renderItem(item)}</li>)}</ul>; }

// Refs as props (React 19+) — forwardRef is deprecated interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> { label: string; ref?: React.Ref<HTMLInputElement>; } function Input({ label, ref, ...props }: InputProps) { return <label>{label}<input ref={ref} {...props} /></label>; }

5. State Management

useReducer for Complex State

type Action = | { type: 'FETCH_START' } | { type: 'FETCH_SUCCESS'; payload: User[] } | { type: 'FETCH_ERROR'; payload: string };

function reducer(state: { data: User[]; loading: boolean; error: string | null }, action: Action) { switch (action.type) { case 'FETCH_START': return { ...state, loading: true, error: null }; case 'FETCH_SUCCESS': return { ...state, loading: false, data: action.payload }; case 'FETCH_ERROR': return { ...state, loading: false, error: action.payload }; } }

6. Performance Patterns

// memo + useCallback prevent unnecessary re-renders const ListItem = memo(function ListItem({ item, onDelete }: ItemProps) { return <li>{item.name}<button onClick={() => onDelete(item.id)}>Delete</button></li>; });

function List() { const [items, setItems] = useState<Item[]>([]); const handleDelete = useCallback((id: string) => { setItems(items => items.filter(item => item.id !== id)); }, []); return <>{items.map(item => <ListItem key={item.id} item={item} onDelete={handleDelete} />)}</>; }

// Lazy loading with Suspense const Dashboard = lazy(() => import('./Dashboard')); function App() { return ( <Suspense fallback={<div>Loading...</div>}> <Routes><Route path="/dashboard" element={<Dashboard />} /></Routes> </Suspense> ); }

7. Error Handling

class ErrorBoundary extends Component<{ children: ReactNode; fallback?: ReactNode }, { hasError: boolean }> { state = { hasError: false }; static getDerivedStateFromError(): { hasError: boolean } { return { hasError: true }; } componentDidCatch(error: Error, info: ErrorInfo) { console.error(error, info); } render() { return this.state.hasError ? (this.props.fallback ?? <div>Something went wrong</div>) : this.props.children; } }

// Wrap async data loading with Suspense function UserProfile({ userId }: { userId: string }) { const user = use(fetchUser(userId)); // Suspends return <div>{user.name}</div>; }

Best Practices

• Composition over inheritance - Use composition patterns for flexibility

• Type everything - Leverage TypeScript for compile-time safety

• Colocate state - Keep state as close to where it's used as possible

• Extract custom hooks - Share logic across components with hooks

• Stable references - Use useCallback/useMemo to prevent unnecessary re-renders

• Error boundaries - Wrap component trees to catch rendering errors

• Suspense for loading - Use Suspense instead of manual loading states

• Avoid prop drilling - Use context or composition for deeply nested props

Anti-Patterns

• Using forwardRef in React 19 - Use ref as a regular prop instead

• Class components for new code - Use function components and hooks

• Mutating state directly - Always use setState or reducer actions

• Missing dependency arrays - Include all dependencies in useEffect/useMemo/useCallback

• Overusing useMemo/useCallback - Only optimize when necessary (profile first)

• Context for everything - Use context sparingly; prefer props or state management library

• Derived state in useState - Compute derived values during render instead

• useEffect for derived state - Use useMemo or compute directly in render

• Index as key - Use stable unique IDs for list keys

• Ignoring TypeScript errors - Never use 'any' or '// @ts-ignore' as shortcuts