React Rendering Explained

In the last lesson, React Context API Best Practices, you finished sharing state across your app. Now we tackle speed by understanding React rendering: what a render is, what triggers it, and why one component re-rendering can pull its children along.

🤔 Why understand rendering?

Here’s the pain. People try to speed up React apps by guessing, and they often make it worse.

• They add useMemo and React.memo everywhere without knowing what actually re-renders.
• They can’t tell why a component updates when its own data didn’t change.
• They miss the real cause, which is almost always an unnecessary re-render.
• So the fix is random, instead of targeted.

So understanding rendering is the foundation. Once you know what triggers a render and what it pulls along, every optimization later makes sense.

🐍 What is a render?

Let’s define it plainly, because the word gets used loosely.

• A render is React calling your component function to figure out what it should show.
• React runs the function, gets back the JSX, and compares it to what’s currently on screen.
• If anything changed, React updates just those parts of the real page.
• Rendering is not the same as updating the screen. React renders (calculates), then updates only what differs.

So a render is just React asking “what should this look like now?”. Keep this in mind:

• It happens a lot, and most of the time it’s cheap.
• The trouble only starts when it happens needlessly on heavy components.

⚡ What triggers a re-render

A component re-renders for a small, specific set of reasons. Know these and you can explain almost any re-render.

• Its state changes (you called a state setter like setCount).
• Its props change (the parent passed it something new).
• Its parent re-renders (more on this next, it’s the big one).
• A context it reads changes value.

So if a component re-rendered, it’s one of these. Most surprising re-renders come from the third reason: the parent re-rendered.

🌳 A parent re-render re-renders its children

This is the most important rule, and the one people miss. When a component re-renders, by default all of its children re-render too, even if their props didn’t change.

import { useState } from "react";

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

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Count: {count}</button>
      <Child /> {/* re-renders every time Parent does, even with no props */}
    </div>
  );
}

function Child() {
  console.log("Child rendered"); // logs on every Parent render
  return <p>I am the child</p>;
}

Walk through what happens on each click.

• Clicking the button changes count, so Parent re-renders.
• Child has no props and didn’t change, but it still re-renders, just because Parent did.
• You’d see “Child rendered” in the console on every single click.

Child rendered
(click) Child rendered
(click) Child rendered

So by default, a re-render flows downward. The parent re-renders, and all its children follow, whether they needed to or not.

🤔 Is this a problem?

Usually no, but sometimes yes. It depends on how heavy the children are.

• For small, fast components, these extra re-renders cost almost nothing. Don’t worry about them.
• For heavy components, like a big list or a complex chart, needless re-renders add up and feel slow.
• So the goal isn’t to stop all re-renders. It’s to stop the expensive, unnecessary ones.

So don’t panic about re-renders in general:

• React is fast, so the everyday re-render is nothing to worry about.
• You only optimize when a real, heavy component re-renders for no reason, which the next lessons will show you how to fix.

🔍 How to see what’s re-rendering

Before optimizing, you need to see the re-renders. A couple of simple ways.

• Drop a console.log at the top of a component to see when it runs.
• Use the React DevTools browser extension, which can highlight components as they re-render.
• These show you the truth, so you optimize the real problem instead of guessing.

So always measure first:

• See which component re-renders too often, then confirm it’s actually heavy.
• Only then reach for a fix, so you spend effort where it counts.

🧩 What You’ve Learned

• ✅ A render is React calling your component to figure out what to show
• ✅ Rendering is calculating; React then updates only the parts of the screen that changed
• ✅ A component re-renders when its state changes, its props change, its parent re-renders, or a context it reads changes
• ✅ By default, when a parent re-renders, all its children re-render too, even without prop changes
• ✅ Most re-renders are cheap and harmless; only heavy, needless ones are worth fixing
• ✅ Measure with console.log or React DevTools before optimizing

🚀 What’s Next?

Now you understand when React re-renders and how it flows to children. Next you’ll learn the first tool to stop a child from re-rendering needlessly: React.memo.

React React.memo