Project: Performance
- React course
- Intermediate
- Lesson 33/80
- 4 min
Review the goal and steps of the performance project.
Project: Performance
In this project we'll build a performance-focused app step by step. Three lessons: expensive computation (useMemo), stable handler (useCallback), and memo'd list. Each lesson builds on the previous.
Scenario: a stats panel. The user enters data, expensive computations run (sum, average, median), each row has a click handler. Done wrong, every click re-renders the whole panel; done right, only the relevant part renders.
After three lessons you'll have a real performance optimization experience. Profiling tools make the difference visible.
Three-step structure
The first lesson writes the StatsPanel component. Expensive computations (sum, average, median) are cached with useMemo; if data doesn't change, no recompute.
The second lesson writes the StatsRow component. The click handler is stabilized with useCallback; clicking each row doesn't needlessly render the parent.
The third lesson uses MemoRow with React.memo. Thanks to stable props, only the relevant row renders. This is where the three lessons merge.
Practice StatsApp skeleton
Complete the skeleton. Write a StatsApp component. Define numbers with useState([10, 20, 30]). Return <main><h1>Stats</h1><p>{ '{ numbers.length }' } items</p></main>. Export it.
Starter code
import { useState } from "react";
// Write the StatsApp component hereSample solution
import { useState } from "react";
function StatsApp() {
const [numbers] = useState([10, 20, 30]);
return (
<main>
<h1>Stats</h1>
<p>{numbers.length} items</p>
</main>
);
}
export default StatsApp;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When is performance optimization done?
- Always
- When real slowness is measured Correct answer
- Never
- Only in CSS
Explanation: When slowness is measured.
2 Three tools
Three core tools for performance: useMemo, useCallback and ____.Three core tools for performance: useMemo, useCallback and React.memo.Explanation: React.memo is the third tool.
3 Match the performance steps
| Term | Meaning |
|---|---|
useMemo |
compute |
useCallback |
handler |
memo |
row |
profile |
measure |