Pure Component and React.memo

import ParentComp from "./components/PureComps/ParentComp";

function App() {
  return (
    <div className="App">
      <ParentComp />
    </div>
  );
}

export default App;

import { Component } from 'react';
import PureComp from './PureComp';
import RegComp from './RegComp';

class ParentComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Rishabh"
    };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ name: "Rishabh" });
    }, 2000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    console.log("**********Parent Component*********");
    return (
      <div>
        Parent Component
        <RegComp name={this.state.name} />
        <PureComp name={this.state.name} />
      </div>
    );
  }
}

export default ParentComp;

import { Component } from 'react';

class RegComp extends Component {
  render() {
    console.log("Regular Component");
    return <div>Regular component {this.props.name}</div>;
  }
}

export default RegComp;

import { PureComponent } from 'react';

class PureComp extends PureComponent {
  render() {
    console.log("Pure Component");
    return <div>Pure Component {this.props.name}</div>;
  }
}

export default PureComp;

**********Parent Component*********
Regular Component
Pure Component
**********Parent Component*********
Regular Component
**********Parent Component*********
Regular Component
**********Parent Component*********
Regular Component
…continues every 2 seconds

'Rishabh' === 'Rishabh'; // true
5 === 5;                 // true
5 === '5';               // false — different types

var a = [1, 2, 3];
var b = [1, 2, 3];
var c = a;

var ab_eq = (a === b); // false — same contents, different arrays
var ac_eq = (a === c); // true  — same reference

// Roughly what PureComponent does
function shallowEqual(objA, objB) {
  if (Object.is(objA, objB)) return true;
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);
  if (keysA.length !== keysB.length) return false;
  return keysA.every(key => Object.is(objA[key], objB[key]));
}

shallowEqual({ name: 'A', age: 1 }, { name: 'A', age: 1 });           // true
shallowEqual({ user: { name: 'A' } }, { user: { name: 'A' } });       // false — different objects

import React from 'react';

const MemoComp = ({ name }) => {
  console.log('Rendering Memo Component');
  return <div>{name}</div>;
};

export default React.memo(MemoComp);

import { Component } from 'react';
import MemoComp from './MemoComp';

class ParentComp extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Rishabh"
    };
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState({ name: "Rishabh" });
    }, 2000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    console.log("**********Parent Component*********");
    return (
      <div>
        Parent Component
        <MemoComp name={this.state.name} />
      </div>
    );
  }
}

export default ParentComp;

**********Parent Component*********
Rendering Memo Component
**********Parent Component*********
**********Parent Component*********
…

const Greeting = React.memo(function Greeting({ name }) {
  const theme = useContext(ThemeContext); // re-renders when the theme changes, even with the same name
  return <h1 className={theme}>Hello, {name}</h1>;
});

function MyComponent(props) {
  /* render using props */
}

function areEqual(prevProps, nextProps) {
  /*
    return true if passing nextProps to render would return
    the same result as passing prevProps to render,
    otherwise return false
  */
}

export default React.memo(MyComponent, areEqual);

const Chart = React.memo(
  function Chart({ data, onPointClick }) { /* expensive rendering */ },
  (prev, next) => prev.data.version === next.data.version // skip if the data version is the same
);

const List = React.memo(function List({ items, style, onSelect }) {
  console.log('List render');
  return <ul style={style}>{items.map(i => <li key={i} onClick={() => onSelect(i)}>{i}</li>)}</ul>;
});

function App() {
  const [count, setCount] = useState(0);
  const items = ['a', 'b'];

  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <List
        items={items}                   // ❌ new array every render
        style={{ color: 'red' }}        // ❌ new object every render
        onSelect={i => console.log(i)}  // ❌ new function every render
      />
    </>
  );
}
// Clicking the button logs "List render" every time — memo does nothing.

const listStyle = { color: 'red' };           // defined outside: never changes

function App() {
  const [count, setCount] = useState(0);
  const items = useMemo(() => ['a', 'b'], []);                 // same array across renders
  const handleSelect = useCallback(i => console.log(i), []);   // same function across renders

  return (
    <>
      <button onClick={() => setCount(count + 1)}>{count}</button>
      <List items={items} style={listStyle} onSelect={handleSelect} />
    </>
  );
}
// Now "List render" is logged only once.

// Q1: Does Child re-render when Parent's count changes?
const Child = React.memo(({ user }) => <p>{user.name}</p>);

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>{count}</button>
      <Child user={{ name: 'Asha' }} />
    </>
  );
}
// Answer: Yes — { name: 'Asha' } is a new object every render, so the shallow check fails.
// Define the object outside the component or wrap it in useMemo.

// Q2: A PureComponent's list doesn't update after adding an item. Why?
addItem = () => {
  const items = this.state.items;
  items.push('new');
  this.setState({ items });
};
// Answer: the same array is mutated and passed back, so prevState.items === nextState.items
// and PureComponent skips the render. Create a new array: [...this.state.items, 'new'].

// Q3: What does this comparison function do?
export default React.memo(Row, (prev, next) => prev.id === next.id);
// Answer: Row re-renders only when id changes. Changes to other props (like label or onClick)
// are ignored — which can show stale data or call old callbacks.

// Q4: Will this memoized component re-render when the theme changes?
const Title = React.memo(() => {
  const theme = useContext(ThemeContext);
  return <h1 className={theme}>Title</h1>;
});
// Answer: Yes. React.memo only compares props; context and state changes still re-render it.

// Q5: Parent is a class component that calls this.setState({ name: 'A' }) with the same value.
// Does the parent re-render? Does a React.memo child with name="A" re-render?
// Answer: The parent re-renders (class setState always re-renders unless shouldComponentUpdate
// says no). The memo child does not — its props are shallowly equal.