What is Rendering?

Start Here

Rendering is the single most important concept in React. Once you get this, everything else clicks.

The Simple Answer

Rendering = React calling your component function

Your component is just a function. When React "renders" it, React calls that function. The function runs, returns some JSX, and React figures out what changed on screen.

Think of it like a recipe:

Your component is the recipe (a function)
Rendering is following the recipe (calling the function)
The JSX it returns is the finished dish (a description of UI)
React is the chef who decides when to cook and what plates to update

The Render Cycle

Every render follows the same 4 steps. Press play to watch them happen one by one:

VISUALThe Render Cycle — Step by Step

Press "Play" to see the render cycle animate step by step, or click any step number.

What Causes a Render?

There are exactly 3 things that make React render your component. Click each one to learn more, then try the live demo:

INTERACTIVE3 Things That Cause a Render

Live demo — click the button to trigger a state change render

<Parent />renders: 1

Click me!

<Child />renders: 1

I re-render when my parent does

Render Does Not Mean Screen Update

This is the #1 misconception. "Rendering" does not mean React changed the screen. React may call your function, compare the output, and decide nothing changed — so the real DOM stays untouched.

KEY CONCEPTRender !== DOM Update

"Rendering" just means React called your function. It does not mean the screen changed. React only touches the real DOM when the output is actually different.

1. Render

f()

Function called

2. Diff

Compare old vs new

same

3. DOM

SKIP

Nothing to do

untouched

Current output:

Hello, Alice!

Try "Set same name" — React still renders (calls your function), but the DOM stays untouched because the output didn't change.

Summary

RenderReact calls your component function

TriggersInitial mount, state change, or parent re-render

During renderFunction runs top-to-bottom, all code executes, JSX is returned

After renderReact diffs old vs new JSX, patches only what changed in the DOM

Key insightRendering is cheap, DOM updates are expensive — React minimizes DOM work

Now that you understand what rendering is, explore what happens during a render — and why it matters for every hook you'll learn:

Variables Reset →Code Re-execution →Render Cascade →