Where should I call useState in a component?
At the top level of the component, before any early returns. Never inside conditions, loops, or nested functions, because React tracks hooks by call order and breaking that order causes bugs.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in How to Use useState in React: A Complete Beginner Tutorial
Call useState with an initial value. It returns the current state and a setter function. Destructure them as value and setValue, read the value in your JSX, and call the setter in event handlers to update state and trigger a re-render.
When the new state depends on the previous state. Pass a function like setCount(prev => prev + 1) so you get the correct previous value, especially when multiple updates are batched together in the same event.
Never mutate the object directly. Create a new object with the spread operator, like setUser({ ...user, name: 'New' }). React detects the new reference and re-renders; mutating in place may not trigger an update.
Still have questions?
Browse all our FAQs or reach out to our support team