ReactでResizeObserverを使い、要素の幅で表示を変える

import { useCallback, useState } from 'react';

// 要素の幅（content box）を state にする
export function useElementWidth<T extends Element>() {
  const [width, setWidth] = useState<number | null>(null);

  // React 19 では、ref に渡した関数から片付けの関数を返せる
  const ref = useCallback((el: T | null) => {
    if (!el) return;
    const observer = new ResizeObserver(([entry]) => {
      setWidth(entry.contentBoxSize[0].inlineSize);
    });
    observer.observe(el);
    return () => observer.disconnect();
  }, []);

  return [ref, width] as const;
}

import { useCallback, useState } from 'react';

// [この幅以上なら, この名前] を、幅の大きい順に並べる。最後は 0 にする
export type Breakpoints<N extends string> = readonly (readonly [minWidth: number, name: N])[];

// 要素の幅を、区切りに当てはめた名前にして返す
export function useWidthClass<T extends Element, N extends string>(breakpoints: Breakpoints<N>) {
  const [name, setName] = useState<N | null>(null);

  const ref = useCallback(
    (el: T | null) => {
      if (!el) return;
      const observer = new ResizeObserver(([entry]) => {
        const width = entry.contentBoxSize[0].inlineSize;
        const hit = breakpoints.find(([min]) => width >= min) ?? breakpoints[breakpoints.length - 1];
        // 同じ名前なら、React は描画し直さない
        setName(hit[1]);
      });
      observer.observe(el);
      return () => observer.disconnect();
    },
    [breakpoints],
  );

  return [ref, name] as const;
}

import { useWidthClass, type Breakpoints } from './useWidthClass';

// 配列はコンポーネントの外に置き、描画のたびに作り直さない
const CARD_BREAKPOINTS: Breakpoints<'wide' | 'medium' | 'narrow'> = [
  [480, 'wide'],
  [300, 'medium'],
  [0, 'narrow'],
];

export function ProfileCard() {
  const [ref, layout] = useWidthClass<HTMLDivElement, 'wide' | 'medium' | 'narrow'>(CARD_BREAKPOINTS);

  return (
    <div ref={ref}>
      {/* 幅が分かるまでは描かない */}
      {layout && (
        <div className={`card ${layout}`} data-layout={layout}>
          <div className="avatar" />
          <div>
            <strong>ねこ</strong>
            <p style={{ margin: 0, fontSize: 14 }}>レイアウト：{layout}</p>
          </div>
          {layout !== 'medium' && (
            <div className="stats">
              <span>記事 12</span>
              <span>いいね 34</span>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

.card { display: grid; gap: 12px; padding: 16px; border: 2px solid #00c8e8; border-radius: 10px; background: #eefafd; }
.card.narrow { grid-template-columns: 1fr; text-align: center; }
.card.medium { grid-template-columns: 64px 1fr; align-items: center; }
.card.wide { grid-template-columns: 96px 1fr 160px; align-items: center; }
.card.medium .stats { display: none; }

枠の幅 480px: {"label":"カードの幅：480px","layout":"wide"}
枠の幅 479px: {"label":"カードの幅：479px","layout":"medium"}
枠の幅 300px: {"label":"カードの幅：300px","layout":"medium"}
枠の幅 299px: {"label":"カードの幅：299px","layout":"narrow"}

幅を変える前: {"byWidth":3,"byClass":3,"roCallbacks":4}
305px から 700px まで 5px ずつ 80 回変えたあと: {"byWidth":83,"byClass":5,"roCallbacks":164}

マウント直後: {"created":2,"observe":2,"disconnect":1,"active":1,"callbacks":2}
+1 を3回押したあと: {"created":5,"observe":5,"disconnect":4,"active":1,"callbacks":5}

パネルを出したあと: {"obj":"null","cb":"240","ro":{"created":2,"observe":2,"disconnect":1,"active":1,"callbacks":1}}
callback ref の側のパネルを消したあと: {"created":2,"observe":2,"disconnect":2,"active":0,"callbacks":1}

plain: {"id":"plain","contentRect":256,"contentBoxSize":256,"borderBoxSize":300,"offsetWidth":300,"getBoundingClientRect":300}
scaled: {"id":"scaled","contentRect":256,"contentBoxSize":256,"borderBoxSize":300,"offsetWidth":300,"getBoundingClientRect":150}

開いた直後: {"renders":5,"callbacks":4}
1秒後: {"renders":65,"callbacks":64,"errors":0}

開いた直後: {"renders":4,"callbacks":3}
1秒後: {"renders":64,"callbacks":63,"errors":63,"firstError":"ResizeObserver loop completed with undelivered notifications."}