Paths/Frontend Engineer/React Fundamentals / Rendering & Lists
Memoise the Expensive Parts
Memoisation is a trade - you pay for the comparison to save the recomputation. Apply it where the work is actually expensive.
Validator
⏱ 0:00
IDLE — checks run live as you type commands; submit when done
01Requirements
live checks- File ~/frontend/src/components/OrderTable.tsx exists○
- The component memoises an expensive calculation○
- The component memoises a callback○
- The component wraps the export in memo○
02Walkthrough
1 of 3 revealed- 01
Write the component
The export is the memoised component - the inner function stays the readable implementation.
echo 'import { memo, useCallback, useMemo } from "react";\nimport type { Order } from "../types/order";\n\ninterface OrderTableProps {\n readonly orders: readonly Order[];\n readonly onSelect: (id: string) => void;\n}\n\nfunction OrderTableImpl({ orders, onSelect }: OrderTableProps) {\n const totalCents = useMemo(\n () => orders.reduce((sum, order) => sum + order.amountCents, 0),\n [orders],\n );' > ~/frontend/src/components/OrderTable.tsx - 2 locked · each failed submit reveals one
03Stuck?
0 of 3 revealedTake a hint without losing the lab — each one points at the thing to look at, not at the answer.
04AI Tutor
guides, never solvesTell me what you're stuck on — I'll nudge, not solve. Which requirement are you looking at?
04Notebook
saved locally in this browserlearner@lab — ubuntu:24.04
Session is disposable
↑/↓ recalls commands · Ctrl+Enter submits · type help for the command list