scrimba
Frontend Career Path
Advanced React
Performance
Three phases of "rendering"
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

Three phases of "rendering"
AboutCommentsNotes
Three phases of "rendering"
Expand for more info
App.jsx
run
preview
console
import React from "react"
import GrandParent from "./GrandParent"

export default function App() {
const [count, setCount] = React.useState(0)

function increment() {
setCount(prevCount => prevCount + 1)
}

function decrement() {
setCount(prevCount => prevCount - 1)
}

console.log("[GP] [P] [C] [GC] APP just rendered")
return (
<div>
<button onClick={decrement}>-1</button>
<button onClick={increment}>+1</button>
<h2>{count}</h2>
<p>App component</p>
<GrandParent count={count} />
<GrandParent />
</div>
)
}
Console
"[GP] [P] [C] [GC] APP just rendered"
,
"[👴🏼] [ ] [ ] [ ] rendered"
,
"[ ] [👩🏼‍⚕️] [ ] [ ] rendered"
,
"[ ] [ ] [🧒🏻] [ ] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [ ] [🧒🏻] [ ] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [👩🏼‍⚕️] [ ] [ ] rendered"
,
"[ ] [ ] [🧒🏻] [ ] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [ ] [🧒🏻] [ ] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[👴🏼] [ ] [ ] [ ] rendered"
,
"[ ] [👩🏼‍⚕️] [ ] [ ] rendered"
,
"[ ] [ ] [🧒🏻] [ ] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [ ] [🧒🏻] [ ] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [👩🏼‍⚕️] [ ] [ ] rendered"
,
"[ ] [ ] [🧒🏻] [ ] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [ ] [🧒🏻] [ ] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
"[ ] [ ] [ ] [👶🏻] rendered"
,
/index.html
-6:23