A useSize hook, and a chart that ignores unrelated state
Run it and change the box width by editing style={{ width: 320 }}: the chart follows. The three counts come from real renders. Try passing data={[...data]} to MemoLine: a new array each render defeats memo, and the memo count goes up with every hover.
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
measured width: 320
3 hovers: plain chart re-rendered 3 times, memo chart 0 times
box resized to 200px -> svg width 200 | both charts re-rendered once more: true