React Academy · Lesson

Pure Components & Avoiding Side Effects in Render

Write render functions that are free of mutations and external reads.

Pure Components & Avoiding Side Effects in Render is a free React Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the React Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Welcome

In this lesson you will learn what a pure component means in React, why render functions must be free of side effects, and how to spot and fix common purity violations.

What Is a Pure Function?

A pure function always returns the same output for the same inputs and causes no observable side effects. React expects your component function to be pure: given the same props and state, it should always return the same JSX.

Why Purity Matters in React

React can call your component multiple times (StrictMode, concurrent features, server rendering). If your render has side effects like API calls, DOM mutations, or global variable writes, those effects will run multiple times unpredictably.

Common Impurity: Mutating External State

Never mutate variables defined outside the component during render. Mutations are fine inside event handlers or useEffect, but not at render time.

let totalRenders = 0; // external
function Counter() {
  totalRenders++; // BAD: side effect in render
  return <p>{totalRenders}</p>;
}

Common Impurity: Mutating Props

Never mutate the props object inside a component. Props are read-only. If you need a modified version, create a new variable.

// Bad
function Badge({ user }) {
  user.name = user.name.toUpperCase(); // mutates prop!
  return <p>{user.name}</p>;
}

// Good
function Badge({ user }) {
  const displayName = user.name.toUpperCase();
  return <p>{displayName}</p>;
}

Common Impurity: Using Random / Date in Render

Calling `Math.random()` or `Date.now()` directly in render produces different values on each call, breaking purity. Move these into state initializers or useEffect.

// Bad
function Token() {
  const id = Math.random(); // different every render!
  return <p>{id}</p>;
}

// Good
function Token() {
  const [id] = useState(() => Math.random());
  return <p>{id}</p>;
}

API Calls Belong in useEffect

Fetching data directly inside the component function body (not in useEffect) is an impurity — it triggers on every render. Always move fetch calls into useEffect with appropriate dependencies.

// Bad
function Profile({ id }) {
  fetch('/api/user/' + id); // runs on every render!
  return <div />;
}

// Good
useEffect(() => {
  fetch('/api/user/' + id).then(/*...*/);
}, [id]);

Local Mutations Are Fine

Creating and mutating objects/arrays that were created *inside* the same render call is perfectly fine — no one else can observe them. This is called a local mutation.

function List({ items }) {
  const sorted = [...items]; // new array
  sorted.sort();             // mutating a local copy: OK
  return sorted.map(i => <li key={i}>{i}</li>);
}

Using Strict Mode to Find Impurities

React StrictMode calls your component twice in development. If your UI is inconsistent between the two calls or you see duplicate side effects, your render is impure. Fix the impurity until the double-call is harmless.

Pure Components and React.memo

When a component is pure (same props → same output), wrapping it with `React.memo` tells React it can skip re-rendering if props have not changed, improving performance.

const Pure = React.memo(function Pure({ value }) {
  return <p>{value}</p>;
});

Quick Check

Which of the following is an acceptable side effect to perform directly inside a React component's render function?

Recap

Pure components always return the same JSX for the same inputs. Avoid mutating props or external variables in render, use useEffect for side effects, and rely on StrictMode to catch violations.

Up Next

Next lesson: **Key & Ref Best Practices** — you will use stable keys correctly, avoid the index-as-key pitfall, and work with callback refs.

Frequently asked questions

Is the “Pure Components & Avoiding Side Effects in Render” lesson free?

Yes — the full text of “Pure Components & Avoiding Side Effects in Render” is free to read here on the web, and the React Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the React Academy course, upgrade to CoddyKit PRO.

What will I learn in “Pure Components & Avoiding Side Effects in Render”?

Write render functions that are free of mutations and external reads. You practise React Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start React Academy?

No prior experience is required. React Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Pure Components & Avoiding Side Effects in Render” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this React Academy lesson?

Yes. Every React Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

What StrictMode Does
Pure Components & Avoiding Side Effects in Render
Key & Ref Best Practices
Folder Structure & Naming Conventions

← Back to React Academy