Core Challenges

React patterns evolve with each major version. React 19 introduced the use() hook for promise handling and formalized Server Component boundaries with clearer client/server semantics. Common pitfalls include:

• Hook ordering violations: Conditionally calling hooks breaks React's tracking system
• Unnecessary memoization: useMemo/useCallback/React.memo add overhead without measurement
• Oversized components: Mixing Server and Client logic prevents streaming optimization
• Missing Suspense boundaries: Async data without Suspense blocks entire render
• Stale closures: Effects with incorrect dependency arrays or missing cleanup
• Key misuse: Index keys cause state to attach to wrong list items after reorder

React 19 improves these patterns: use() hook for consuming promises, Server Components for data fetching without extra requests, and useTransition() for non-blocking updates.

Workflow

1. Identify component responsibilities: Determine if component should be Server (data-heavy) or Client (interactive)
2. Define hooks at top level: All hooks must execute unconditionally before any returns
3. Use Suspense for async: Wrap use() hook calls with Suspense boundaries for loading fallback
4. Compose with keys: Use stable, unique keys for list items; use key prop to reset component state