Where do side effects belong in React?
In useEffect, event handlers, or other dedicated places, never directly in the render body. Performing side effects during render causes them to run on every render, leaks, and inconsistent state.
Verify This Answer
Cross-check this information using these trusted sources:
More FAQs in Rendering vs Side Effects: Understanding the React Mental Model
Rendering is the pure process of describing the UI from state and props. Side effects are anything that reaches outside the render, like fetching, subscribing, or DOM manipulation. Rendering should be pure; side effects belong in useEffect.
Because React relies on render being predictable. Given the same state, render should produce the same output with no external changes. This lets React safely re-render and reconcile without surprises or bugs.
Because it runs on every render, causes repeated network requests, leaks, and inconsistent state. Fetching is a side effect and belongs in useEffect, where you can control when it runs and clean it up.
Still have questions?
Browse all our FAQs or reach out to our support team