Avoiding unnecessary renders in React - Step-by-Step Execution

Concept Flow - Avoiding unnecessary renders

Initial Render

↓

Component Renders

↓

State or Props Change?

No→No Re-render

Yes↓

Check if Render Needed

↓

Render or Skip

↓

Update DOM if Rendered

↓

Wait for Next Change

This flow shows how React decides to re-render a component only when state or props change meaningfully, avoiding unnecessary updates.

Execution Sample

React

import React, { useState, memo } from 'react';

const Child = memo(({ count }) => {
  console.log('Child render');
  return <div>Count: {count}</div>;
});

export default function App() {
  const [count, setCount] = useState(0);
  const [text, setText] = useState('');

  return (
    <>
      <Child count={count} />
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <input value={text} onChange={e => setText(e.target.value)} />
    </>
  );
}

This React code shows a memoized Child component that only re-renders when its count prop changes, avoiding re-renders when unrelated state changes.

Execution Table

Step	Action	State Before	State After	Child Render?	Console Output
1	Initial render	count=0, text=''	count=0, text=''	Yes	Child render
2	Click Increment button	count=0, text=''	count=1, text=''	Yes	Child render
3	Type in input (text='a')	count=1, text=''	count=1, text='a'	No
4	Type in input (text='ab')	count=1, text='a'	count=1, text='ab'	No
5	Click Increment button	count=1, text='ab'	count=2, text='ab'	Yes	Child render
6	No further actions	count=2, text='ab'	count=2, text='ab'	No

💡 No re-render occurs when unrelated state (text) changes because Child is memoized and count prop did not change.

Variable Tracker

Variable	Start	After 1	After 2	After 3	After 4	After 5	Final
count	0	0	1	1	1	2	2
text	''	''	''	'a'	'ab'	'ab'	'ab'

Key Moments - 3 Insights

Why doesn't the Child component re-render when I type in the input?

Because Child is wrapped with React.memo and only depends on the count prop, which did not change during input typing (see steps 3 and 4 in execution_table).

What triggers the Child component to re-render?

Changing the count state triggers Child to re-render because count is passed as a prop to Child (see steps 2 and 5 in execution_table).

Does React re-render the whole App component when any state changes?

Yes, App re-renders on any state change, but memoized Child only re-renders if its props change, avoiding unnecessary DOM updates (see execution_table steps 3 and 4).

Visual Quiz - 3 Questions

Look at the execution table, at which step does the Child component NOT re-render despite state change?

A Step 5

B Step 3

C Step 2

D Step 1

💡 Hint

Check the 'Child Render?' column for steps where state changes but Child render is 'No'.

According to variable_tracker, what is the value of 'count' after step 5?

A 2

B 1

C 0

D 'ab'

💡 Hint

Look at the 'count' row under 'After 5' column in variable_tracker.

If the Child component was not memoized, what would happen when typing in the input?

A Child would only re-render on count change

B Child would never re-render

C Child would re-render on every input change

D App would not re-render

💡 Hint

Consider how React re-renders components by default without memoization (see key_moments about memo).

Concept Snapshot

Avoid unnecessary renders in React by memoizing components with React.memo.
Memoized components re-render only when their props change.
State changes in parent cause parent re-render but not memoized child if props unchanged.
Use memo to improve performance by skipping redundant renders.
Check console logs to verify when components render.

Full Transcript

This lesson shows how React avoids unnecessary renders using React.memo. The Child component is wrapped with memo, so it only re-renders when its count prop changes. When the input text changes, the Child does not re-render because its props remain the same. The execution table tracks each step: initial render, incrementing count, typing text, and shows when Child renders or skips rendering. The variable tracker shows how count and text state change over time. Key moments clarify why Child skips renders on text changes and re-renders on count changes. The quiz tests understanding of these behaviors. This helps beginners see how React optimizes rendering to improve app performance.