useSyncExternalStoreとResizeObserverを使って要素のリサイズ発生時に幅と高さを取得するhooksを作る

...
const [width, setWidth] = useState(0);
const ref = useRef<HTMLDivElement>(null);
useEffect(() => {
    const observer = new ResizeObserver((entries) => { 
        entries.forEach((entry)=>setWidth(entry.contentRect.width));
     });
    if(ref.current){
        observer.observe(ref.current);
    }
    return () => observer.disconnect();
},[])
// 下記のdivのサイズが変化した時、幅がセットされ再描画が起きるため、widthがコンソールに表示される。
console.log(width)
return <div ref={ref} />

import { useSyncExternalStore } from 'react';

function callback = () => navigator.online;
function subscribe(callback) {
  window.addEventListener('online', callback);
  window.addEventListener('offline', callback);
  // サブスクライブ関数の戻り値はイベントに対するリスナーを解除する関数を返す必要がある
  return () => {
    window.removeEventListener('online', callback);
    window.removeEventListener('offline', callback);
  };
}
const isOnline = useSyncExternalStore(subscribe, callback);

return <div>{isOnline ? "Online" : "Offline"}</div>

export const useResizeObserver = <T extends HTMLElement>() => {
  const ref = useRef<T>(null);
  const subscribe = useCallback((onStoreChange: () => void) => {
    const observer = new ResizeObserver((entries) => {
     // 監視対象の要素がリサイズした際、useSyncExternalStoreフックから渡される、
     // 画面の再描画を行う関数を実行する。
      entries.forEach(() => onStoreChange());
    });
    if (ref.current) {
      observer.observe(ref.current);
    }
    return () => observer.disconnect();
  }, []);

  const height = useSyncExternalStore(
    subscribe,
    () => ref.current?.clientHeight || 0
  );
  const width = useSyncExternalStore(
    subscribe,
    () => ref.current?.clientWidth || 0
  );
  return { ref, width, height };
};