Why does my React component re-render in an infinite loop?
Usually because you called the state setter directly in the render body. Only update state inside event handlers, effects, or callbacks. Calling the setter during render triggers a re-render, which calls it again, creating an infinite loop.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in How to Use useState to Update Your React UI
Call useState with an initial value. It returns the current state and a setter function. Call the setter with a new value to update state and trigger a re-render. Name the pair like count and setCount by convention.
Because state updates are asynchronous and batched. Reading the variable right after calling the setter shows the old value. React applies updates later and re-renders once, which improves performance.
Never mutate the object directly. Create a new object with the changes using the spread operator, like setUser({ ...user, name: 'New' }). React detects the new reference and re-renders.
Still have questions?
Browse all our FAQs or reach out to our support team