Ref callbackとcleanup functions

2025-01-19

React

Ref callback#

React では、ref属性に関数を渡すことが出来る。

1
<div
2
  ref={(node) => {
3
    console.log(node);
4
  }}
5
/>

これを利用することで、DOM 要素がマウントされたときに何かしらの処理を行ったり、DOM 要素を参照することが出来る。

https://ja.react.dev/reference/react-dom/components/common#ref-callback

Ref callback の cleanup 関数#

React v19 で、refコールバック関数が返す関数をクリーンアップ関数として扱うようになった。

1
const ref = (node: HTMLDivElement | null) => {
2
  if (node) {
3
    console.log("Mounted");
4
    return () => {
5
      console.log("Unmounted");
6
    };
7
  }
8
};

クリーンアップ関数は、対象の DOM ノードがアンマウントされたときに呼び出される。

Ref callback と useEffect#

useEffectはuseRefなどと組み合わせることでに似たようなことが出来る。特に React 19 以降では、クリーンアップ関数の追加により、ほぼ完全に同等のことが出来るようになった。

ただし、useEffectが React ライフサイクルに依存しているのに対して、refコールバックは DOM ノードのライフサイクルに依存しており、完全に同じになることはない。

React のライフサイクルに沿って DOM ノードを処理したい場合、例えば複数の DOM ノードを組み合わせたい場合などは、useEffectが適している可能性がある。一方で、多くのケースでは DOM ノードと React のライフサイクルの関心を分離できるrefコールバックの方が、例えばイベントの登録や解除の漏れが発生しにくく、適しているように思う。

Ref callback の例#

Ref callback を利用した例、特にクリーンアップ関数を利用したものを意図的に多くの載せている。

要素がマウントされたらフォーカスさせる#

1
<input
2
  ref={(node) => {
3
    node?.focus();
4
  }}
5
/>

要素のサイズを取得する#

1
const [width, setWidth] = useState(0);
2
const masureRef = (node) => {
3
    consrt observer = new ResizeObserver((entries) => {
4
        setWidth(entries[0].contentRect.width);
5
    });
6
    observer.observe(node);
7

8
    return () => {
9
        observer.disconnect();
10
    };
11
}
12

13
return <div ref={masureRef}>Width: {width}</div>;

要素がビューポート内に入ったか監視する#

1
const [isVisible, setIsVisible] = useState(false);
2
const ref = (node: HTMLDivElement | null) => {
3
  if (node) {
4
    const observer = new IntersectionObserver(([entry]) => {
5
      if (entry.isIntersecting) {
6
        setIsVisible(true);
7
      }
8
    });
9
    observer.observe(node);
10

11
    return () => observer.disconnect();
12
  }
13
};
14
return <div ref={ref}>{isVisible ? "Visible" : "Not visible"}</div>;

要素の変更を監視する#

1
const [text, setText] = useState("Initial Text");
2

3
const ref = (node: HTMLDivElement | null) => {
4
  if (node) {
5
    const observer = new MutationObserver(() => {
6
      console.log("DOM changed:", node.textContent);
7
    });
8

9
    observer.observe(node, { childList: true, subtree: true });
10

11
    return () => observer.disconnect();
12
  }
13
};
14
return (
15
  <div ref={ref} contentEditable>
16
    {text}
17
  </div>
18
);

要素を全画面表示する#

1
const ref = (node: HTMLDivElement | null) => {
2
  const controller = new AbortController();
3
  if (node) {
4
    const enterFullscreen = () => {
5
      node.requestFullscreen?.();
6
    };
7

8
    node.addEventListener("click", enterFullscreen, {
9
      signal: controller.signal,
10
    });
11

12
    return () => controller.abort();
13
  }
14
};
15

16
return (
17
  <div
18
    ref={ref}
19
    style={{
20
      width: "300px",
21
      height: "200px",
22
      cursor: "pointer",
23
    }}
24
  >
25
    Click to go fullscreen!
26
  </div>
27
);

クリップボードにコピーする#

1
const ref = (node: HTMLButtonElement | null) => {
2
  if (node) {
3
    const controller = new AbortController();
4
    const handleCopy = () => {
5
      navigator.clipboard.writeText(node.textContent || "");
6
    };
7

8
    node.addEventListener("click", handleCopy, {
9
      signal: controller.signal,
10
    });
11

12
    return () => controller.abort();
13
  }
14
};
15

16
return <button ref={ref}>Copy to Clipboard</button>;

ドラッグ&ドロップを監視する#

1
const ref = (node: HTMLDivElement | null) => {
2
  const controller = new AbortController();
3
  if (node) {
4
    const handleDragStart = (event: DragEvent) => {
5
      event.dataTransfer?.setData("text/plain", "Dragged Content");
6
    };
7

8
    node.draggable = true;
9
    node.addEventListener("dragstart", handleDragStart, {
10
      signal: controller.signal,
11
    });
12

13
    return () => controller.abort();
14
  }
15
};
16

17
return (
18
  <div
19
    ref={ref}
20
    style={{
21
      cursor: "move",
22
    }}
23
  >
24
    Drag Me
25
  </div>
26
);

カメラの映像を表示する#

1
const ref = (node: HTMLVideoElement | null) => {
2
  if (node) {
3
    navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
4
      node.srcObject = stream;
5
    });
6

7
    return () => {
8
      if (node.srcObject instanceof MediaStream) {
9
        node.srcObject.getTracks().forEach((track) => track.stop());
10
      }
11
    };
12
  }
13
};
14

15
return <video ref={ref} autoPlay />;

要素のリサイズを監視する#

1
const [size, setSize] = useState({ width: 0, height: 0 });
2

3
const ref = (node: HTMLDivElement | null) => {
4
  if (node) {
5
    const observer = new ResizeObserver(([entry]) => {
6
      const { width, height } = entry.contentRect;
7
      setSize({ width, height });
8
    });
9

10
    observer.observe(node);
11

12
    return () => observer.disconnect();
13
  }
14
};
15

16
return (
17
  <div>
18
    <div
19
      ref={ref}
20
      style={{
21
        width: "200px",
22
        height: "200px",
23
        resize: "both",
24
        overflow: "auto",
25
      }}
26
    />
27
    <p>
28
      Width: {size.width}px, Height: {size.height}px
29
    </p>
30
  </div>
31
);

要素をアニメーションさせる#

1
const ref = (node: HTMLDivElement | null) => {
2
  if (node) {
3
    const animation = node.animate(
4
      [{ transform: "translateX(0)" }, { transform: "translateX(100px)" }],
5
      { duration: 1000, iterations: Infinity }
6
    );
7

8
    return () => animation.cancel();
9
  }
10
};
11

12
return <div ref={ref}>Auto moving</div>;