Data Visualization · Exercise 5 of 5 Previous
Advanced
A useSize hook
Write the useSize hook: it returns [ref, { width, height }], measures the element in useLayoutEffect, keeps reporting with a ResizeObserver, and disconnects the observer in its cleanup.
Chart should draw nothing but measuring… while the width is 0, and then an <svg> as wide as its box.
What Check tests
- The svg is as wide as its box (320)
- The svg follows the box when it is resized to 200
- The code disconnects the observer
- No attribute holds NaN
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Runs in your browser. Your code is saved here.
Your page
Press Run to see the page.
Console
Nothing logged yet.