10,000 trips on a canvas, one React element
Minutes are whole numbers, so the marks line up in columns. The same 10,000 marks as SVG circles would be 10,000 DOM nodes; Topic 12.1 measures where that starts to hurt.
Measure the chart's box with a useSize hook, stop unrelated state from redrawing the chart, put thousands of marks on a canvas behind one ref, and know what the React Compiler changes.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write useSize() so that it returns [ref, { width, height }], ignores a change smaller than 1 pixel, and disconnects the observer on cleanup. Where would you read the first size, and why?
A line chart takes data and onHover. The parent writes <Line data={rows} onHover={(d) => setHovered(d)} /> and the chart still redraws on every hover. What is wrong, and what is the fix?
Explain it without notes
Why does a useSize hook measure in useLayoutEffect and return a width of 0 first?
A dashboard parent re-renders on every mouse move. Give two ways to stop the chart inside it from redrawing, and one way each can fail.
When would you draw a React chart on a canvas instead of SVG, and what do you lose?
What does the React Compiler change for chart components, and what does it not change?
Preview
Console
Nothing logged yet.Expected console output
trips: 10000
drew 10000 marks in one effect, no DOM nodes for them
canvas elements: 1 | svg elements: 0