【React】useImperativeHandleで親から子で公開されたメソッドを使う

useImperativeHandleという便利な hook を知ったので調べた

ja.react.dev

useImperativeHandleは、Reactのカスタムフックで、親コンポーネントが子コンポーネントの内部的なインスタンスを操作できるようにするために使われる

通常、Reactでは「データの流れは一方向（親→子）」という原則があるが、このフックを使うと、親から子に対して命令的（imperative）な操作が可能になる

基本的な使い方

1. 目的
   子コンポーネントが公開したい特定のメソッドやプロパティを親コンポーネントに提供する

2. 構文

useImperativeHandle(ref, createHandle, [deps])

• ref: 親から渡されるrefオブジェクト（forwardRefと組み合わせる必要がある）
• createHandle: 子コンポーネントが公開したいプロパティやメソッドを返す関数
• deps: 依存配列（optional）。depsに変更があった場合のみハンドルが再生成される

使用例

import React, { useImperativeHandle, forwardRef, useRef } from "react";

// 子コンポーネント
const ChildComponent = forwardRef((props, ref) => {
  const internalValue = useRef(0);

  // 親に公開するメソッドを定義
  useImperativeHandle(ref, () => ({
    increment: () => {
      internalValue.current += 1;
      console.log("Value incremented:", internalValue.current);
    },
    getValue: () => {
      return internalValue.current;
    }
  }));

  return <div>内部値を操作するコンポーネント</div>;
});

// 親コンポーネント
const ParentComponent = () => {
  const childRef = useRef();

  const handleIncrement = () => {
    childRef.current.increment();
  };

  const handleGetValue = () => {
    alert(`現在の値: ${childRef.current.getValue()}`);
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleIncrement}>値をインクリメント</button>
      <button onClick={handleGetValue}>値を取得</button>
    </div>
  );
};

export default ParentComponent;