Mastering Canvas Sizing & Fluid Layouts in React: Eliminating Resize Bottlenecks

1400 font-semibold">import { useState, useEffect, RefObject } 400 font-semibold">from 400 font-semibold">class="text-emerald-300">"react";
2
3400 font-semibold">export 400 font-semibold">function 300 font-medium">useContainerSize(containerRef: RefObject<HTMLElement>) {
4  400 font-semibold">const [size, setSize] = 300 font-medium">useState({ width: 0, height: 0 });
5
6  300 font-medium">useEffect(() => {
7    400 font-semibold">const el = containerRef.current;
8    400 font-semibold">if (!el) 400 font-semibold">return;
9
10    400 font-semibold">let timer: ReturnType<typeof setTimeout>;
11
12    400 font-semibold">const observer = 400 font-semibold">new 300 font-medium">ResizeObserver((entries) => {
13      400 font-semibold">if (!entries[0]) 400 font-semibold">return;
14      400 font-semibold">const { width, height } = entries[0].contentRect;
15
16      300 font-medium">clearTimeout(timer);
17      timer = 300 font-medium">setTimeout(() => {
18        300 font-medium">setSize({ width: Math.300 font-medium">floor(width), height: Math.300 font-medium">floor(height) });
19      }, 16);
20    });
21
22    observer.300 font-medium">observe(el);
23    400 font-semibold">return () => {
24      300 font-medium">clearTimeout(timer);
25      observer.300 font-medium">disconnect();
26    };
27  }, [containerRef]);
28
29  400 font-semibold">return size;
30}