Module 5 · Forms, performance and access Lesson 14 of 15
Lists at scale: keys, memo and windowing
A list of a thousand rows re-renders every time any state changes. A stable key, React.memo on the row, and a windowing library that renders only visible rows turn a janky page into a smooth one.
Worked example
useMemo for the filtered array and memo(JobRow) mean the filter runs once and only the rows that changed re-render.
Your practice task
Render a 500-item list, add useMemo for the filter, and confirm with the React profiler that typing stays responsive.
Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.
Key takeaway
A list of a thousand rows re-renders every time any state changes. A stable key, React.memo on the row, and a windowing library that renders only visible rows turn a janky page into a smooth one.
Keep your place in this course
A free account saves which lessons you have finished and unlocks the certificate. The lesson itself stays free to read.
Create free account or sign inCourse complete
You finished every lesson.
Your certificate is ready, and the projects you built are the proof to attach to an application.
Almost there
15 lessons left of 15
Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.