React.memo usage - Step-by-Step Execution

Concept Flow - React.memo usage

Component receives props

↓

React.memo compares new props

↓

Skip re-render

↓

Update DOM if needed

React.memo checks if props changed. If not, it skips re-render to save work.

Execution Sample

React

const MyComponent = React.memo(({ count }) => {
  console.log('Rendered:', count);
  return <div>{count}</div>;
});

<MyComponent count={1} />
<MyComponent count={1} />
<MyComponent count={2} />

This code shows React.memo preventing re-render when props stay the same.

Execution Table

Step	Props Received	Props Compared	Render Occurs?	Console Output
1	{ count: 1 }	No previous props	Yes	Rendered: 1
2	{ count: 1 }	Compare with { count: 1 }	No
3	{ count: 2 }	Compare with { count: 1 }	Yes	Rendered: 2

💡 At step 2, props are equal so React.memo skips re-render.

Variable Tracker

Variable	Start	After 1	After 2	After 3
props.count	undefined	1	1	2
rendered	false	true	false	true

Key Moments - 2 Insights

Why does the component not re-render at step 2 even though it is called again?

Because React.memo compares the new props { count: 1 } with previous props { count: 1 } and finds them equal, so it skips re-rendering as shown in execution_table row 2.

What happens if the props change, like at step 3?

React.memo detects the changed props { count: 2 } differ from previous { count: 1 }, so it allows the component to re-render, as shown in execution_table row 3.

Visual Quiz - 3 Questions

Look at the execution table, what is the console output at step 2?

A No output

B "Rendered: 2"

C "Rendered: 1"

D Error

💡 Hint

Check the 'Console Output' column for step 2 in the execution_table.

At which step does React.memo allow the component to re-render?

A Step 1

B Step 2

C Step 3

D None

💡 Hint

Look at the 'Render Occurs?' column in execution_table for steps where it says 'Yes'.

If the props never change, what will React.memo do on repeated renders?

A Always re-render the component

B Skip re-render to improve performance

C Throw an error

D Reset component state

💡 Hint

Refer to the concept_flow and execution_table where React.memo skips re-render when props are equal.

Concept Snapshot

React.memo is a function that wraps a component.
It compares new props with previous props.
If props are equal, it skips re-rendering.
This improves performance by avoiding unnecessary updates.
Use it for functional components that render the same output for same props.

Full Transcript

React.memo is a tool to optimize React functional components. When a component wrapped in React.memo receives props, React compares the new props with the previous ones. If they are the same, React.memo prevents the component from re-rendering, saving time and resources. In the example, the component renders at step 1 because it has no previous props. At step 2, the props are the same, so React.memo skips rendering. At step 3, the props change, so React.memo allows the component to render again. This behavior helps keep apps fast by avoiding unnecessary work.