The answer
Because React tracks hooks by the order they are called. If a hook is inside a condition, the order can change between renders, which breaks React's internal tracking and causes bugs. Always call hooks at the top level.
Common useState Mistakes That Break Your React App
Why is calling useState inside a condition bad?
More FAQs in Common useState Mistakes That Break Your React App
Usually because you mutated the state variable directly or mutated an object in place instead of creating a new one. React compares references, so always use the setter and replace objects and arrays with new copies.
Because state updates are batched and count is the same stale value for both calls. Use setCount(prev => prev + 1) so each update receives the correct previous value, even when batched together.
Pass a value for simple initial state. For expensive initial computations, pass a function that returns the value so it only runs once on the first render instead of on every render.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.