React · Describing the UI

Keeping Components Pure

Learn why pure components are predictable, testable, and safe. Master the art of writing reliable React code!

Find videos you like?

Save to resource drawer for future reference!

What is a Pure Function?

Pure functions are predictable - same input always gives same output!

A pure function is like a reliable calculator. Give it the same input, and it always returns the same output. It doesn't change anything outside itself, and it doesn't depend on anything that might change. React components should work the same way!

✅ Pure Function

function double(x) {

return x * 2;

}

double(3) → 6 (always!)

Same input = Same output ✅

❌ Impure Function

let count = 0;

function increment() {

count = count + 1;

return count;

}

Changes external variable ❌

Pure Components = Predictable UI

When React components are pure, they're easier to understand, test, and debug. Same props always produce the same JSX!

Pure Component Example

A component that always produces the same output for the same props!

Pure Recipe Component

Given the same props, this component always renders the same result

Frontend

function Recipe({ name, ingredients, servings }) {
  // Pure! Only uses props, no external variables
  const multipliedIngredients = ingredients.map(ing => ({
    ...ing,
    amount: ing.amount * servings
  }));
  
  return (
    <div className="recipe-card">
      <h2>{name}</h2>
      <p className="servings">Servings: {servings}</p>
      <ul>
        {multipliedIngredients.map((ing, i) => (
          <li key={i}>
            {ing.amount} {ing.unit} {ing.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  const pancakeIngredients = [
    { name: 'Flour', amount: 1, unit: 'cup' },
    { name: 'Eggs', amount: 2, unit: '' },
    { name: 'Milk', amount: 1, unit: 'cup' }
  ];
  
  return (
    <div className="container">
      <Recipe 
        name="Pancakes 🥞" 
        ingredients={pancakeIngredients}
        servings={2}
      />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Live Preview

Loading preview...

What Makes a Component Impure?

Side effects - when your component changes things outside itself!

A component is impure when it has side effects - it changes things that existed before rendering. This includes modifying variables outside the component, changing the DOM directly, or making network requests during render.

❌ Impure: Modifying External Variable

let guestCount = 0;

function Cup() {

guestCount = guestCount + 1; // ❌ BAD!

return <h2>Guest #{guestCount}</h2>;

}

Problem: Changes external state during render!

✅ Pure: Using Props

function Cup({guest}) {

return <h2>Guest #{guest}</h2>; // ✅ GOOD!

}

Solution: Pass data through props!

Why Does This Matter?

React may render components multiple times. If a component has side effects, those effects will run multiple times, causing bugs!

Local Mutation is OK!

Changing variables created during rendering is perfectly fine!

It's totally fine to change variables and arrays that you create during the same render. This is called local mutation. The key is that these variables didn't exist before your component started rendering!

✅ Local Mutation Example

function TodoList({todos}) {

// Create NEW array during this render

const items = []; // ✅ Fresh & local

for (let i = 0; i < todos.length; i++) {

items.push(<li>{todos[i]}</li>); // ✅ OK to mutate

}

return <ul>{items}</ul>;

}

✅ The array was created fresh in this render - safe to change!

React's Strict Mode

A development tool that helps you find impure components!

React has a special Strict Mode that calls each component twice during development (not in production). If your component is impure, calling it twice will reveal the problem!

How It Works

1️⃣Renders component once

2️⃣Renders component again

3️⃣If results differ → Component is impure!

Enabling Strict Mode

<React.StrictMode>

<App />

</React.StrictMode>

Wrap your app to enable checking!

Development Only

Strict Mode only runs in development. Your production build won't call components twice!

Where Should Side Effects Go?

Side effects belong in event handlers and useEffect, not during render!

If you need to do something with side effects (update a variable, call an API, modify the DOM), don't do it during render! Instead, use event handlers or the useEffect Hook.

✅ Event Handlers

function Button() {

function handleClick() {

// Side effects OK here!

console.log('clicked');

}

return <button onClick={handleClick} />

}

✅ useEffect Hook

function Component() {

useEffect(() => {

// Side effects OK here!

fetchData();

}, []);

return <div>...</div>

}

Remember

Rendering must be pure. Side effects go in event handlers or useEffect!

Best Practices

Follow these guidelines to keep your components pure!

✅ Do This

•Only use props and state during render
•Create new arrays/objects instead of modifying existing ones
•Put side effects in event handlers or useEffect
•Use Strict Mode during development
•Test that components work when rendered twice

❌ Don't Do This

•Don't modify variables that existed before render
•Don't mutate props - they're read-only!
•Don't make API calls during render
•Don't modify the DOM directly during render
•Don't rely on timing of other renders

Quick Summary

Key takeaways about pure components!

What is Purity?

A pure component only cares about its props. Given the same props, it always returns the same JSX. It doesn't change anything outside itself.

Why Does It Matter?

React can skip rendering pure components when their props haven't changed. Pure components are also easier to test, debug, and optimize!

The Golden Rule

Keep rendering pure. Put side effects in event handlers or useEffect!

Previous Topic

Mocking & Stubbing

Mock functions, modules, API calls, and isolate components during testing.

Next Topic

UI as Trees

Visualize component trees, render trees, and module dependency trees for better architecture.

Ask a Question

Have a question about Pure Components? Ask our AI assistant.

🔐 Login to use AI Assistant

React · Describing the UI

Keeping Components Pure

Learn why pure components are predictable, testable, and safe. Master the art of writing reliable React code!

Find videos you like?

Save to resource drawer for future reference!

What is a Pure Function?

Pure functions are predictable - same input always gives same output!

✅ Pure Function

function double(x) {

return x * 2;

}

double(3) → 6 (always!)

Same input = Same output ✅

❌ Impure Function

let count = 0;

function increment() {

count = count + 1;

return count;

}

Changes external variable ❌

Pure Components = Predictable UI

When React components are pure, they're easier to understand, test, and debug. Same props always produce the same JSX!

Pure Component Example

A component that always produces the same output for the same props!

Pure Recipe Component

Given the same props, this component always renders the same result

Frontend

function Recipe({ name, ingredients, servings }) {
  // Pure! Only uses props, no external variables
  const multipliedIngredients = ingredients.map(ing => ({
    ...ing,
    amount: ing.amount * servings
  }));
  
  return (
    <div className="recipe-card">
      <h2>{name}</h2>
      <p className="servings">Servings: {servings}</p>
      <ul>
        {multipliedIngredients.map((ing, i) => (
          <li key={i}>
            {ing.amount} {ing.unit} {ing.name}
          </li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  const pancakeIngredients = [
    { name: 'Flour', amount: 1, unit: 'cup' },
    { name: 'Eggs', amount: 2, unit: '' },
    { name: 'Milk', amount: 1, unit: 'cup' }
  ];
  
  return (
    <div className="container">
      <Recipe 
        name="Pancakes 🥞" 
        ingredients={pancakeIngredients}
        servings={2}
      />
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

Live Preview

Loading preview...

What Makes a Component Impure?

Side effects - when your component changes things outside itself!

❌ Impure: Modifying External Variable

let guestCount = 0;

function Cup() {

guestCount = guestCount + 1; // ❌ BAD!

return <h2>Guest #{guestCount}</h2>;

}

Problem: Changes external state during render!

✅ Pure: Using Props

function Cup({guest}) {

return <h2>Guest #{guest}</h2>; // ✅ GOOD!

}

Solution: Pass data through props!

Why Does This Matter?

React may render components multiple times. If a component has side effects, those effects will run multiple times, causing bugs!

Local Mutation is OK!

Changing variables created during rendering is perfectly fine!

✅ Local Mutation Example

function TodoList({todos}) {

// Create NEW array during this render

const items = []; // ✅ Fresh & local

for (let i = 0; i < todos.length; i++) {

items.push(<li>{todos[i]}</li>); // ✅ OK to mutate

}

return <ul>{items}</ul>;

}

✅ The array was created fresh in this render - safe to change!

React's Strict Mode

A development tool that helps you find impure components!

React has a special Strict Mode that calls each component twice during development (not in production). If your component is impure, calling it twice will reveal the problem!

How It Works

1️⃣Renders component once

2️⃣Renders component again

3️⃣If results differ → Component is impure!

Enabling Strict Mode

<React.StrictMode>

<App />

</React.StrictMode>

Wrap your app to enable checking!

Development Only

Strict Mode only runs in development. Your production build won't call components twice!

Where Should Side Effects Go?

Side effects belong in event handlers and useEffect, not during render!

If you need to do something with side effects (update a variable, call an API, modify the DOM), don't do it during render! Instead, use event handlers or the useEffect Hook.

✅ Event Handlers

function Button() {

function handleClick() {

// Side effects OK here!

console.log('clicked');

}

return <button onClick={handleClick} />

}

✅ useEffect Hook

function Component() {

useEffect(() => {

// Side effects OK here!

fetchData();

}, []);

return <div>...</div>

}

Remember

Rendering must be pure. Side effects go in event handlers or useEffect!

Best Practices

Follow these guidelines to keep your components pure!

✅ Do This

•Only use props and state during render
•Create new arrays/objects instead of modifying existing ones
•Put side effects in event handlers or useEffect
•Use Strict Mode during development
•Test that components work when rendered twice

❌ Don't Do This

•Don't modify variables that existed before render
•Don't mutate props - they're read-only!
•Don't make API calls during render
•Don't modify the DOM directly during render
•Don't rely on timing of other renders

Quick Summary

Key takeaways about pure components!

What is Purity?

A pure component only cares about its props. Given the same props, it always returns the same JSX. It doesn't change anything outside itself.

Why Does It Matter?

React can skip rendering pure components when their props haven't changed. Pure components are also easier to test, debug, and optimize!

The Golden Rule

Keep rendering pure. Put side effects in event handlers or useEffect!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Mocking & Stubbing

UI as Trees

Building Your Learning Module...

Keeping Components Pure

✅ Pure Function

❌ Impure Function

Pure Components = Predictable UI

Pure Recipe Component

❌ Impure: Modifying External Variable

✅ Pure: Using Props

Why Does This Matter?

✅ Local Mutation Example

How It Works

Enabling Strict Mode

Development Only

✅ Event Handlers

✅ useEffect Hook

Remember

Best Practices

✅ Do This

❌ Don't Do This

What is Purity?

Why Does It Matter?

The Golden Rule

Mocking & Stubbing

UI as Trees

Keeping Components Pure

✅ Pure Function

❌ Impure Function

Pure Components = Predictable UI

Pure Recipe Component

❌ Impure: Modifying External Variable

✅ Pure: Using Props

Why Does This Matter?

✅ Local Mutation Example

How It Works

Enabling Strict Mode

Development Only

✅ Event Handlers

✅ useEffect Hook

Remember

Best Practices

✅ Do This

❌ Don't Do This

What is Purity?

Why Does It Matter?

The Golden Rule