React hook (useState, useEffect) executed conditionally, inside loops, or outside components.
React relies on the strict, unchanging call order of Hooks on every render to map stateful data to component instances. Calling a hook inside an `if` block, loop, nested function, or regular helper function breaks React's internal call chain.
Causes: invoking hooks inside event handlers, wrapping `useState` in an `if (condition)` check, using hooks in non-component utility functions without naming them as custom hooks (`useX`), or having duplicate versions of React installed in node_modules.
1function UserCard({ userId }: { userId?: string }) {2 // BAD: Conditional hook call!3 if (!userId) {4 return <div>No User ID</div>;5 }6 7 const [data, setData] = useState(null);8 return <div>User: {userId}</div>;9}1function UserCard({ userId }: { userId?: string }) {2 // GOOD: Call hooks at the top level unconditionally3 const [data, setData] = useState(null);4 5 if (!userId) {6 return <div>No User ID</div>;7 }8 9 return <div>User: {userId}</div>;10}Simulate standard system builds to trigger compiler trace records and track memory crashes locally.
When `userId` is missing, the component returns early without reaching `useState`. When `userId` is present, `useState` runs. The number of hooks called changes between renders, corrupting React's hook call stack.