The answer
Because calling the setter schedules a re-render, which runs the component again, which calls the setter again, and so on. Only call setters inside event handlers, effects, or callbacks, never directly during render.
How to Use useState in React: A Complete Beginner Tutorial
Why does calling a setter during render cause an infinite loop?
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
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.