Challenge: Memoized list
- React course
- Intermediate
- Lesson 79/80
- 6 min
Write a filtered list optimized with React.memo, useMemo and useCallback.
Challenge: Memoized list
In this challenge you write a Row component wrapped in memo and a click handler fixed with useCallback.
The goal: when the parent re-renders, rows do not re-render unnecessarily. memo skips rendering when props are the same; useCallback keeps the handler reference stable.
This pair is the basic way to win performance in long lists.
Practice MemoRow and handleClick
Write a Row component: destructure { id, onClick }, render <li onClick={() => onClick(id)}>{id}</li>. Wrap as const MemoRow = memo(Row). Write a List component: keep ids in useState([1, 2, 3]), define handleClick with useCallback (takes id, logs it, deps []). Render <ul> with ids.map(id => <MemoRow key={id} id={id} onClick={handleClick} />). export default List.
Starter code
import { memo, useCallback, useState } from "react";
// Row, MemoRow, List bileşenlerini buraya yazSample solution
import { memo, useCallback, useState } from "react";
function Row({ id, onClick }) {
return <li onClick={() => onClick(id)}>{id}</li>;
}
const MemoRow = memo(Row);
function List() {
const [ids] = useState([1, 2, 3]);
const handleClick = useCallback((id) => {
console.log(id);
}, []);
return (
<ul>
{ids.map((id) => (
<MemoRow key={id} id={id} onClick={handleClick} />
))}
</ul>
);
}
export default List;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When does memo skip rendering?
- When state changes
- When useEffect fires
- Always re-renders
- When props are the same Correct answer
Explanation: memo skips rendering when props are the same.
2 useCallback deps
const handleClick = useCallback((id) => {
console.log(id);
}, ____);const handleClick = useCallback((id) => {
console.log(id);
}, []);Explanation: Empty deps keeps the handler stable.