Rendering vs Side Effects: Understanding the React Mental Model

Rendering vs Side Effects: Understanding the React Mental Model

React draws a clear line between rendering and side effects. Understanding this distinction is the key to thinking in React correctly.

What Rendering Is

Rendering is the pure process of describing what the UI should look like based on state and props. Given the same state, render should produce the same output, with no external changes.

What Side Effects Are

Side effects are anything that reaches outside the render: fetching data, subscribing, manipulating the DOM directly, setting timers, or logging. These are not part of describing the UI.

Why the Separation Matters

React relies on render being pure and predictable. If you perform side effects during render, the results become unpredictable, re-renders cause repeated effects, and the code becomes impossible to reason about.

Where Each Belongs

Rendering happens in the component body and JSX. Side effects happen in useEffect, event handlers, or other dedicated places, never directly in the render body.

The Common Mistake

Beginners fetch data or mutate the DOM directly in the render body. This causes effects to run on every render, leaks, and inconsistent state. Side effects belong in useEffect.

Pure Functions and Predictability

A render function should be pure: same input, same output, no external changes. This is what lets React safely re-render and reconcile without surprises.

The Takeaway

Rendering describes the UI purely from state and props. Side effects reach outside and belong in useEffect or handlers. Keeping these separate is the foundation of predictable React code.