Hooks(useRef) + TypeScriptで親から子コンポーネントの関数を発火する

前提

Reactにおいて親コンポーネントから子コンポーネントを操作(DOMをさわる、関数を発火させる)のはアンチパターン。

いつもの話ですが、ref を使った手続き的なコードはほとんどの場合に避けるべきです。
by https://ja.reactjs.org/docs/hooks-reference.html#useimperativehandle

refを使わずに実装するのであれば、状態を親コンポーネントに寄せるか、あるいはReduxやRecoilに頼るしかない。だけど、それでもどうしてもやりたいという場合は下記の通り。

親コンポーネント

import React, { useRef } from 'react';

const Parent = () => {
  const ref = useRef(null); // 初期化

  const hogeFunction = () => {
    ref.current.fire(); //refオブジェクトからfire()を実行
  }

  return (
    <Child ref={ref}> // refオブジェクトをそのまま渡す
  )
}

子コンポーネント

import React, { FC, useImperativeHandle } from 'react';

interface Props {
  ref: RefObject<void>;
}

const Child: FC<Props> = ({
  ref
}) => {

  useImperativeHandle(ref, () => ({
    fire() {
      // 発火させたい処理
    }
  }));

  // ...(省略)...
}

useImperativeHandleの使い方は下記の通り。

useImperativeHandle(ref, createHandle, [deps])

参考