Project: Performance

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.

Exercise 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.

Show example 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;

Test yourself

When is performance optimization done?
- Always
- When real slowness is measured
- Never
- Only in CSS
Show answer

When real slowness is measured — When slowness is measured.

Three tools

Three core tools for performance: useMemo, useCallback and ____.

Show answer

Three core tools for performance: useMemo, useCallback and React.memo.

Match the performance steps

useMemo

compute
useCallback

handler
memo

row
profile

measure

Next lesson: Expensive computation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies