Why does my React component re-render infinitely?
You are calling a 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 that calls it again, creating a loop.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Common Props and State Mistakes That Cause React Bugs
Usually because you mutated the state variable directly instead of using the setter, or mutated an object in place so React did not detect a reference change. Always use the setter and replace objects and arrays with new copies.
Because it creates two sources of truth that can drift apart. When the prop changes, the copied state does not update, causing bugs. Keep one source of truth and let the parent own the value.
No. If a value can be computed from props or existing state, compute it during render. Storing derived values creates synchronization bugs when the underlying source changes.
Still have questions?
Browse all our FAQs or reach out to our support team