Rendering Vs. Painting

So in this course, each module starts with a custom 3D illustration. You might remember seeing this complex machine from the initial lesson in this module.

I create these illustrations using 3D modeling software called Blender:

In Blender, I can render my project to create a final image:

(This recording is sped up 150x, it's not actually that quick!)

The term “render” generally refers to this sort of thing: we're taking some sort of unprocessed raw input, and generating the final ready-to-use output.

Even in web frameworks, this definition is pretty consistent. In Express, for example, a request ends when we render an HTML template:

app.get('/user/profile', (req, res) => {
  const user = database.get(req.query.userId);

  // Generate the final HTML file and send it to the client:
  return res.render('profile', { name: user.name });
});

In React, however, the term “render” means something slightly different. I think so much confusion in React stems from this misunderstanding.

Let's look at an example. Suppose I have the following component:

function AgeLimit({ age }) {
  if (age < 18) {
    return (
      <p>You're not old enough!</p>
    );
  }

  return (
    <p>Hello, adult!</p>
  );
}

Our AgeLimit component checks an age prop and returns one of two paragraphs.

Now, let's suppose we re-render this component, and wind up with the following before/after pair of snapshots:

age: 16

{
  type: 'p',
  key: null,
  ref: null,
  props: {},
  children: "You're not old enough!",
}

age: 17

{
  type: 'p',
  key: null,
  ref: null,
  props: {},
  children: "You're not old enough!",
}

In both cases, age is less than 18, and so we wind up with the exact same UI. As a result, no DOM mutation happens at all.

So, when we talk about “re-rendering” a component, we aren't necessarily saying that anything will change in the DOM! We're saying that React is going to check if anything's changed. If React spots a difference between snapshots, it'll need to update the DOM, but it will be a precisely-targeted minimal change.

When React does change a part of the DOM, the browser will need to re-paint. A re-paint is when the pixels on the screen are re-drawn because a part of the DOM was mutated. This is done natively by the browser when the DOM is edited with JavaScript (whether by React, Angular, jQuery, vanilla JS, anything).

To summarize:

• A re-render is a React process where it figures out what needs to change (AKA. “reconciliation”, the spot-the-differences game).
• If something has changed between the two snapshots, React will “commit” those changes by editing the DOM, so that it matches the latest snapshot.
• Whenever a DOM node is edited, the browser will re-paint, re-drawing the relevant pixels so that the user sees the correct UI.
• Not all re-renders require re-paints! If nothing has changed between snapshots, React won't edit any DOM nodes, and nothing will be re-painted.

The critical thing to understand is that when we talk about “re-rendering”, we're not saying that we should throw away the current UI and re-build everything from scratch.

React tries to keep the re-painting to a minimum, because re-painting is slow. Instead of generating a bunch of new DOM nodes from scratch (lots of painting), it figures out what's changed between snapshots, and makes the required tweaks with surgical precision.