Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Before your components are displayed on screen, they must be processed by React. Understanding this process helps you think about how your code executes and explain its behavior.
Customer orders food (trigger a render)
Chef prepares the order (React calls your component)
Waiter serves the food (React updates the DOM)
A render must be triggered before React can display anything on screen. Think of it like ordering food at a restaurant - you need to place an order before the kitchen starts cooking!
When your app starts, React needs to display the initial UI. This is triggered by calling createRoot and then render.
import { createRoot } from 'react-dom/client';
const root = createRoot(document.getElementById('root'));
root.render(<App />); // Triggers initial render!Once a component is rendered, you can trigger additional renders by updating its state with the set function from useState.
function Counter() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
Count: {count}
</button>
);
}
// Clicking the button triggers a re-render!When you trigger a render, React calls your component to figure out what should be on screen. "Rendering" is React calling your components!
After triggering a render, React calls your component to figure out what to display. "Rendering" means React is calling your component function.
React calls the root component
State update triggers render
If any child component returns other components, React will render those next. This continues until there are no more nested components.
<App> // 1. React calls App()
<Header /> // 2. Then calls Header()
<Main> // 3. Then calls Main()
<Article /> // 4. Then calls Article()
<Sidebar /> // 5. Then calls Sidebar()
</Main>
<Footer /> // 6. Finally calls Footer()
</App>React walks down the component tree, calling each function to get the JSX it should display.
After rendering your components, React will modify the DOM. But it's smart - it only changes what needs to change!
React uses appendChild() to put all the DOM nodes it created on screen.
React applies the minimal necessary operations to make the DOM match the latest rendering output. It only changes what's different!
React only updates the <p> element's content, leaving the <h1> untouched!
After rendering is done and React has committed changes to the DOM, the browser repaints the screen. This process is called "browser rendering" (or "painting").
Any screen update happens in three steps: Trigger → Render → Commit
"Rendering" is React calling your component functions to get JSX
React only updates DOM nodes that changed since last render
Components must be pure - same inputs always give same outputs