Pure Components in React

Understanding the Design Principle Behind Predictable UI

Thumbnail Image

React’s documentation repeatedly emphasises one core idea: components should behave like pure functions. But why does React prefer purity so strongly?

This isn’t a stylistic preference. It’s a design requirement that enables React’s rendering model, performance optimizations, and developer experience.

Let’s break it down clearly and technically.

1. What Is a Pure Function in This Context?

A pure function:

  • Produces the same output for the same input
  • Does not modify anything outside itself
  • Has no hidden side effects

Example:

function add(a, b) {
 return a + b;
}

Same inputs → same output. Always.

In React terms:

function Greeting({ name }) {
 return <h1>Hello {name}</h1>;
}

If name is "Rahul", the UI will always render "Hello Rahul".

React expects components to behave like this during rendering.

2. React’s Rendering Model Requires Predictability

React does not treat rendering as a one-time event.

It may:

  • Re-render components when state changes
  • Re-render children when parents update
  • Retry rendering
  • Interrupt rendering (React 18+)
  • Double-invoke components in development (Strict Mode)

Because rendering can happen multiple times, React assumes:

Rendering must be safe to run again.

That assumption only holds if components are pure.

If rendering mutates global variables or performs side effects, repeated rendering produces inconsistent results.

3. Re-rendering Happens More Than You Think

Consider this:

function Parent() {
 const [count, setCount] = React.useState(0); return (
 <>
 <button onClick={() => setCount(count + 1)}>
 Click
 </button>
 <Child />
 </>
 );
}

function Child() {
 console.log("Rendered");
 return <h1>Hello</h1>;
}

Each time Parent updates, Child re-renders — even though it has no props.

If Child performs side effects during rendering, those side effects will run repeatedly.

Pure components prevent unintended consequences here.

4. React 18 and Interruptible Rendering

In React 18, rendering can be interrupted and restarted.

If a heavy component begins rendering and a higher-priority update occurs, React may:

  • Pause rendering
  • Discard partial work
  • Restart rendering

If your render logic mutates external data, partial executions can corrupt your state.

Purity ensures:

  • No partial mutations
  • No data corruption
  • No dependency on render order

5. Strict Mode Intentionally Exposes Impurities

In development, React Strict Mode intentionally invokes components twice to detect unsafe patterns.

Example:

function Demo() {
 console.log("Running");
 return <h1>Hi</h1>;
}

You’ll see “Running” twice.

This behaviour highlights side effects during render. If your component changes the global state, the bug appears immediately.

Strict Mode does not break your app. It reveals hidden instability.

6. Performance Optimizations Depend on Purity

React uses optimisations like:

  • Memoization (React.memo)
  • useMemo
  • useCallback
  • Skipping re-renders when inputs haven’t changed

These optimisations rely on the idea that:

Same input → same output

If components are impure, React cannot safely skip work.

Purity enables:

  • Efficient diffing
  • Predictable reconciliation
  • Safe memoization

7. Debugging Becomes Simpler

When components are pure:

  • Bugs are easier to trace
  • Output depends only on props and state
  • No hidden dependencies exist

If a UI looks wrong, you check the input.

If components are impure, debugging becomes difficult because output may depend on:

  • Render order
  • Previous renders
  • Global variables
  • Execution timing

Predictable components reduce mental overhead.

8. Separation of Concerns: Render vs Side Effects

React separates:

  • Rendering logic
  • Side effects

Side effects (API calls, timers, DOM manipulation) belong in:

  • Event handlers
  • useEffect
Rendering should only describe UI.

This separation keeps the system consistent and manageable.

9️⃣ React’s Core Mental Model

React treats components like mathematical functions:

UI = Component(props, state)

Not like:

modifyGlobalData();
UI = Component(props);

React owns the lifecycle. It decides when and how often to render.

Your responsibility is to return UI based solely on input.

Wrapping up

I truly appreciate you taking the time to read this guide. I hope it helped you understand React and its pure components with more clarity and confidence.

If you found it helpful, feel free to share it with others who are learning React and state management. Your support means a lot.

More practical and beginner-friendly content is on the way — stay connected. 🚀

At Dev Simplified, We Value Your Feedback 📊

👉 Follow us not to miss any updates.

👉 Have any suggestions? Let us know in the comments!

👉 Subscribe for free and join our growing community!