Why does calling a setter during render cause an infinite loop?
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.
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