React Mastery / React Core Concepts

Pure Components

📌 What is a Pure Component?

A Pure Component is a type of React component that only re-renders when necessary i.e., when its props or state change. It helps improve performance by preventing unnecessary re-renders.

✅ Think of it like a smart component that checks: “Are my inputs the same as before? If yes, I won’t update!”

🧩 Class vs Functional Pure Components

  • Class Component: Extend React.PureComponent

  • Functional Component: Use React.memo()

🔹 Class Pure Component:

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    return <h2>Hello, {this.props.name}</h2>;
  }
}

  • PureComponent automatically implements shouldComponentUpdate() with a shallow comparison of props and state.

  • Use this only for class-based components.

🔹 Functional Pure Component:

import React from 'react';

const MyComponent = React.memo((props) => {
  return <h2>Hello, {props.name}</h2>;
});

  • React.memo() is a Higher-Order Component that wraps functional components to add memoization.

  • It does the same shallow comparison logic as PureComponent.

🔍 How Does It Work?

Pure components use a shallow comparison of props and state:

  • If no change is found → skips render

  • If change is found → re-renders

Shallow Comparison:

  • Compares primitive values (like strings, numbers) by value

  • Compares objects and arrays by reference, not content

📈 When to Use?

✅ Use Pure Components when:

  • You want to optimize performance

  • Props/state are simple and not deeply nested

  • Components re-render frequently without real changes

❌ Avoid if:

  • You’re passing complex objects/arrays that often look same but have different references

  • You need custom logic to compare props/state

❗️ Very Important

Why PureComponent/React.memo might still re-render even if data looks the same

Let’s say you have two objects like this:

const obj1 = { name: "Alex" };
const obj2 = { name: "Alex" };

console.log(obj1 === obj2); // false

Even though both objects have the same content, they are not equal in JavaScript because they are stored in different memory locations. This is called a reference comparison.

How this affects PureComponent or React.memo

If you pass a new object or array to a component every time it renders, React sees it as a "change" — even if the content is the same.

<MyComponent user={{ name: "Alex" }} />

If this line runs again, a new object is created, so React thinks the props have changed and will re-render the component — even if the data is the same.

What to do instead?

✅ FIX 1: Use useMemo (Best practice)

import React, { useState, useMemo }from"react";
import Child from"./Child";

functionParent() {
const [count, setCount] =useState(0);

// ✅ Object is created only once
const user = useMemo(() => {
return {name:"Alex" };
  }, []);

return (
   <div>
      <button onClick={() => setCount(count+1)}> Count: {count} </button>
      <Childuser = {user} />
   </div>
  );
}

export default Parent;

❓ Why this works

  • useMemo stores the object in memory

  • On re-render, React reuses the same object

  • Reference does NOT change

  • React.memo skips re-render

  • ✅ Child rendered logs only once

✅ FIX 2: Use a variable outside render

import React, { useState } from "react";
import Child from "./Child";

// ✅ Created once (outside the component)
const user = { name: "Alex" };

function Parent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        Count: {count}
      </button>

      <Child user={user} />
    </div>
  );
}

export default Parent;

❓ Why “variable outside render” works

Key rule:

Code outside the component runs once, not on every render.

What happens internally:

  • user object is created only once

Every render uses the same reference.

React compares:

  • previousUser === nextUser// true

  • React.memo says: ✅ “No prop change”

  • Child does not re-render.