Re-rendering behavior in React - Deep Dive

Overview - Re-rendering behavior

What is it?

Re-rendering behavior in React means how and when a component updates what it shows on the screen. When data or state changes, React decides if it needs to redraw parts of the page. This process helps keep the user interface fresh and responsive without reloading the whole page. React tries to do this efficiently to avoid slowing down the app.

Why it matters

Without understanding re-rendering, apps can become slow or behave unexpectedly. If React re-renders too often or unnecessarily, it wastes time and resources, making the app laggy. Knowing how React decides to re-render helps developers write faster, smoother apps that feel good to use. It also helps avoid bugs caused by unexpected updates.

Where it fits

Before learning re-rendering, you should know React components, props, and state basics. After this, you can learn about React hooks, memoization, and performance optimization techniques. Understanding re-rendering is a key step toward mastering React app efficiency.

Mental Model

Core Idea

React re-renders a component whenever its data changes, but it tries to do this only when necessary to keep the app fast and up-to-date.

Think of it like...

Imagine a painter who only repaints the parts of a wall that got dirty instead of repainting the whole wall every time. React is like that painter, updating only what changed.

┌───────────────┐
│ Component     │
│  receives     │
│  new props or │
│  state change │
└──────┬────────┘
       │ triggers
       ▼
┌───────────────┐
│ React compares │
│  old and new  │
│  data         │
└──────┬────────┘
       │ if different
       ▼
┌───────────────┐
│ Component     │
│  re-renders   │
│  UI updates   │
└───────────────┘

Build-Up - 7 Steps

1

Foundation

What triggers a React re-render

Concept: React re-renders a component when its state or props change.

In React, components can have state (data inside them) and receive props (data from parents). When either state or props change, React schedules a re-render to update the UI. For example, calling setState or receiving new props causes React to re-render that component.

Result

The component updates its displayed content to match the new data.

Understanding that state and props changes trigger re-renders is the foundation for controlling when and how your UI updates.

2

Foundation

How React renders components initially

Concept: React builds the UI by calling components as functions and creating a virtual representation of the UI.

When a React app starts, React calls each component function to get what it should show. This creates a virtual tree of elements called the virtual DOM. React then uses this to draw the actual UI on the screen.

Result

The user sees the initial UI rendered based on component code and data.

Knowing that React uses a virtual DOM helps understand why re-rendering is efficient and not just redrawing everything blindly.

3

Intermediate

Virtual DOM diffing and update process

🤔Before reading on: do you think React redraws the entire UI on every change or only parts that changed? Commit to your answer.

Concept: React compares the old and new virtual DOM trees to find differences and updates only those parts in the real DOM.

When data changes, React creates a new virtual DOM tree by calling components again. It then compares this new tree with the previous one to find what changed. React then updates only the changed parts in the real DOM, which is faster than redrawing everything.

Result

Only the necessary parts of the UI update, improving performance.

Understanding the diffing process explains why React apps can update quickly even with many components.

4

Intermediate

Re-rendering and parent-child relationships

🤔Before reading on: if a parent component re-renders, do you think its children always re-render too? Commit to your answer.

Concept: When a parent re-renders, React by default re-renders its children too, unless optimized otherwise.

React calls the parent component function again on re-render. This causes React to also call child components functions again, even if their data didn't change. This can cause extra work and slow down apps if not managed.

Result

Children re-render along with parents, possibly causing unnecessary updates.

Knowing this helps developers optimize by preventing unnecessary child re-renders to improve app speed.

5

Intermediate

How React decides to skip re-rendering

🤔Before reading on: do you think React always re-renders components on state change, or can it skip some? Commit to your answer.

Concept: React can skip re-rendering components if their props and state have not changed, using memoization techniques.

React.memo is a tool that lets React remember a component's last output and skip re-rendering if props are the same. Similarly, useCallback and useMemo hooks help avoid recreating functions or values that cause re-renders. This reduces unnecessary work.

Result

Components only re-render when their data actually changes, improving performance.

Understanding memoization tools empowers developers to control re-rendering and optimize apps.

6

Advanced

State updates batching and asynchronous rendering

🤔Before reading on: do you think React applies state updates immediately or batches them for efficiency? Commit to your answer.

Concept: React batches multiple state updates together and applies them asynchronously to reduce re-renders and improve performance.

When multiple setState calls happen quickly, React groups them and updates the UI once. This avoids multiple re-renders in a short time. React 18 introduced automatic batching even for asynchronous events, making apps smoother.

Result

Fewer re-renders happen, making apps faster and less jumpy.

Knowing batching behavior helps avoid bugs related to state timing and improves app responsiveness.

7

Expert

React 18 concurrent rendering and transitions

🤔Before reading on: do you think React always blocks user input during rendering, or can it keep the UI responsive? Commit to your answer.

Concept: React 18 introduced concurrent rendering that lets React interrupt rendering to keep the UI responsive and show updates smoothly using transitions.

Concurrent rendering allows React to pause rendering work and show urgent updates like user input immediately. Transitions mark some updates as non-urgent, letting React delay them without blocking the UI. This improves user experience in complex apps.

Result

Apps feel faster and more responsive, even during heavy updates.

Understanding concurrent rendering unlocks advanced performance tuning and better user experience design.

Under the Hood

React keeps a virtual DOM tree in memory representing the UI. When data changes, React calls component functions to create a new virtual DOM tree. It then compares the new tree with the old one using a diffing algorithm that checks element types and keys. React calculates the minimal set of changes needed and applies them to the real DOM. React also batches state updates and uses a scheduler to prioritize urgent updates. React 18's concurrent mode uses fibers to split rendering work into small units that can be paused and resumed.

Why designed this way?

React was designed to solve slow and complex UI updates in traditional web apps. Direct DOM manipulation is slow and error-prone. The virtual DOM and diffing allow React to minimize real DOM changes, improving speed. Batching and concurrent rendering were added to handle modern app complexity and keep interfaces smooth. Alternatives like manual DOM updates or full page reloads were too slow or cumbersome.

┌───────────────┐
│ State/Props   │
└──────┬────────┘
       │ triggers
       ▼
┌───────────────┐
│ Component     │
│ function runs │
└──────┬────────┘
       │ creates
       ▼
┌───────────────┐
│ New Virtual   │
│ DOM tree      │
└──────┬────────┘
       │ diff
       ▼
┌───────────────┐
│ Compare old   │
│ and new trees │
└──────┬────────┘
       │ minimal changes
       ▼
┌───────────────┐
│ Update real   │
│ DOM           │
└───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does React always re-render the entire UI on any state change? Commit to yes or no.

Common Belief: React re-renders the whole UI every time any state changes.

Reality: React only re-renders the components whose state or props changed and updates only the parts of the DOM that differ.

Why it matters: Believing React redraws everything leads to unnecessary optimization attempts and confusion about performance.

Quick: If a parent component re-renders, do its children always skip re-rendering? Commit to yes or no.

Common Belief: Children components never re-render if their props don't change, even if the parent re-renders.

Reality: By default, children re-render when their parent re-renders, even if their props are unchanged, unless memoized.

Why it matters: Ignoring this causes unexpected slowdowns and bugs due to unnecessary child re-renders.

Quick: Does React batch state updates only in event handlers or also in async code? Commit to your answer.

Common Belief: React batches state updates only inside event handlers, not in asynchronous code like promises or timeouts.

Reality: React 18 batches state updates even in asynchronous code automatically.

Why it matters: Not knowing this leads to bugs where state updates behave inconsistently across code contexts.

Quick: Can React interrupt rendering to keep the UI responsive? Commit to yes or no.

Common Belief: React rendering blocks the UI until it finishes, so the interface can freeze during heavy updates.

Reality: React 18's concurrent rendering can pause and resume rendering to keep the UI responsive.

Why it matters: Missing this leads to misunderstanding how to build smooth user experiences in complex apps.

Expert Zone

1

React's diffing algorithm assumes components return elements with stable keys to optimize updates; changing keys unnecessarily causes full re-renders.

2

React.memo does a shallow comparison of props by default; deep objects or functions can cause unexpected re-renders unless carefully managed.

3

Concurrent rendering can cause subtle bugs with effects and state if code assumes synchronous rendering; understanding this is key for advanced apps.

When NOT to use

Avoid relying on React.memo or useMemo prematurely; sometimes simpler code with normal re-renders is better. For very simple or static UIs, manual DOM updates or static HTML may be more efficient. Also, concurrent rendering is not suitable for all environments or legacy codebases.

Production Patterns

In production, developers use React.memo and useCallback to prevent unnecessary re-renders in large lists or complex components. They profile apps with React DevTools to find re-render hotspots. Concurrent features like startTransition are used to mark non-urgent updates, improving perceived performance.

Connections

Change Detection in Angular

Both React and Angular detect changes to update the UI but use different strategies; React uses virtual DOM diffing, Angular uses zone.js and change detection cycles.

Understanding React's re-rendering helps compare and appreciate different UI update models in frameworks.

Memoization in Functional Programming

React's memoization techniques like React.memo and useMemo apply the functional programming idea of caching results to avoid repeated work.

Knowing functional memoization clarifies why React uses these hooks to optimize rendering.

Human Attention and Task Switching

React's concurrent rendering mimics how humans switch attention between tasks to stay responsive, pausing less urgent work.

This connection shows how UI responsiveness design parallels cognitive science principles.

Common Pitfalls

#1 Unnecessary re-renders caused by passing new object or function props every render.

Wrong approach:

function Parent() {
return console.log('clicked')} />;
}

Correct approach:

const handleClick = useCallback(() => console.log('clicked'), []);
function Parent() {
return ;
}

Root cause:

Creating new function props inline causes React.memo to see props as changed, triggering re-renders.

#2 Mutating state directly instead of creating new state objects.

Wrong approach:

const [items, setItems] = useState([]);
items.push('new');
setItems(items);

Correct approach:

const [items, setItems] = useState([]);
setItems(prev => [...prev, 'new']);

Root cause:

Mutating state breaks React's change detection, so it may not re-render as expected.

#3 Assuming React batches state updates in all contexts before React 18.

Wrong approach:

setState(1);
setState(2);
// expecting one re-render

Correct approach:

React 17 and earlier batch only in event handlers; in async code, updates cause multiple re-renders.

Root cause:

Misunderstanding React's batching scope leads to unexpected multiple renders.

Key Takeaways

React re-renders components when their state or props change, but it tries to do this efficiently using a virtual DOM and diffing.

Parent component re-renders cause child components to re-render by default, which can be optimized using memoization techniques.

React batches multiple state updates to reduce re-renders and improve performance, especially with React 18's automatic batching.

Concurrent rendering in React 18 allows the UI to stay responsive by interrupting and prioritizing rendering work.

Understanding re-rendering deeply helps write faster, smoother React apps and avoid common performance pitfalls.