Reactで、外側をクリックしたら閉じるカスタムフックの作り方

import { useEffect, useEffectEvent, type RefObject } from 'react';

// targets のどの要素の外側が押されても onOutside を呼ぶ。enabled が false のあいだは何もしない
export function useClickOutside(
  targets: RefObject<HTMLElement | null>[],
  onOutside: (event: PointerEvent) => void,
  enabled = true,
) {
  // 使う側が描画のたびに新しい関数や配列を渡しても、登録し直さない
  const onPointerDown = useEffectEvent((event: PointerEvent) => {
    const node = event.target as Node;
    if (targets.some((target) => target.current?.contains(node))) return;
    onOutside(event);
  });

  useEffect(() => {
    if (!enabled) return;
    document.addEventListener('pointerdown', onPointerDown);
    return () => document.removeEventListener('pointerdown', onPointerDown);
  }, [enabled]);
}

function Menu() {
  const [open, setOpen] = useState(false);
  const menuRef = useRef<HTMLDivElement>(null);
  const buttonRef = useRef<HTMLButtonElement>(null);
  useClickOutside([menuRef, buttonRef], () => setOpen(false), open);

  return (
    <>
      <button ref={buttonRef} onClick={() => setOpen((o) => !o)}>メニュー</button>
      {open && (
        <div ref={menuRef} className="menu">
          <p>並べ替え</p>
          <button>名前順</button>
        </div>
      )}
    </>
  );
}

ボタンを押したあと: メニューが出ている
メニューの項目を押したあと: メニューが出ている
外側（左上から 400,300 の位置）を押したあと: メニューが出ていない
もう一度ボタンを押したあと: メニューが出ている
開いたままボタンを押したあと: メニューが出ていない

もう一度ボタンを押したあと: メニュー：開いている
開いたままボタンを押したあと: メニュー：開いている
呼ばれた順: toggle → outside → toggle → outside → toggle

ボタンを押したあと: メニュー：閉じている
呼ばれた順: toggle → outside
document のリスナー: add click, remove click

click: メニュー：閉じている
fixed: メニュー：開いている

StrictMode あり（開発用のビルド）
  表示した直後: （なし）
  開いたあと: add pointerdown
  開いたまま 描き直し 5回 のあと: add pointerdown
  閉じたあと: add pointerdown, remove pointerdown

表示した直後: add pointerdown, remove pointerdown, add pointerdown

色の一覧の DOM の親: BODY／メニューの要素の中にあるか: false
「白」を押したあと: メニュー：閉じている／色：なし

import { useEffect, useEffectEvent, useRef, type RefObject, type PointerEvent as ReactPointerEvent } from 'react';

// useClickOutside に、ポータルの中で押されたときを内側とみなす仕組みを足した版
export function useClickOutside(
  targets: RefObject<HTMLElement | null>[],
  onOutside: (event: PointerEvent) => void,
  enabled = true,
) {
  // React のツリーの中で押されたイベントを覚えておく
  const insideEvents = useRef(new WeakSet<Event>());

  const onPointerDown = useEffectEvent((event: PointerEvent) => {
    if (insideEvents.current.has(event)) return;
    const node = event.target as Node;
    if (targets.some((target) => target.current?.contains(node))) return;
    onOutside(event);
  });

  useEffect(() => {
    if (!enabled) return;
    document.addEventListener('pointerdown', onPointerDown);
    return () => document.removeEventListener('pointerdown', onPointerDown);
  }, [enabled]);

  // 内側の要素の onPointerDownCapture に渡す。ポータルの中で押されても呼ばれる
  return (event: ReactPointerEvent) => {
    insideEvents.current.add(event.nativeEvent);
  };
}

const markInside = useClickOutside([menuRef, buttonRef], close, open);
// ...
<div ref={menuRef} className="menu" onPointerDownCapture={markInside}>

「白」を押したあと: メニュー：開いている／色：白
外側を押したあと: メニュー：閉じている／色：白

ボタンをタップしたあと: メニュー：開いている
メニューの項目をタップしたあと: メニュー：開いている
外側をタップしたあと: メニュー：閉じている
外側のタップで届いたイベント: pointerdown(touch) → touchstart → mousedown → click