useImperativeHandle と forwardRef を使うととても便利

hooks 出てきた頃に「使うのはコーナーケースなので〜」というようなことが書いてあったのでスルーしていたのだけど、ついに使うタイミングがきた
素直に React のアプリ書いてるとユースケースは確かになさそうなのだけど
モーダルで使う機能を hook に切り出している
モーダルの開け閉めをする関数をモーダルのコンポーネントが持っている
親ページでモーダルの開け閉めをするために子の開け閉め関数を呼びたい
というシーンで使えることが分かった
子コンポーネントでは forwardRef で ref を受け取って useImperativeHandle を使って、モーダル開け閉め用の関数を指定する
親コンポーネント側で useRef を使って ref を作って、子に ref={ref} で渡す
親コンポーネントで ref.current から参照する
少しハマったのは、 onClick={ref.current ? ref.current.foo : undefined} みたいな感じに書くと ref の更新で render が走らないっぽいので foo を参照できない
onClick={() => ref.current ? ref.current.foo() : undefined} にするとクリックしたタイミングで評価されるので参照できる
具体的なコードは
App.tsx
interface Handler {
  foo(): void
}

const Child = forwardRef<Handler, Props>(props, ref) => {
  const { foo } = useSome()
  useImperativeHandler(ref, () => {
    foo: () => foo()
  }))
  return <div>...</div>
}

const App: React.FC = () => {
  const childRef = useRef({} as Handler)
  return (
  	<div>
  	  <button onClick={() => childRef.current ? childRef.current.foo() : null}>click me</button>
  	  <Child ref={childRef} />
  	</div>
  )
}
こんな感じ #20190821

参考:
https://ja.reactjs.org/docs/hooks-reference.html#useimperativehandle
https://ja.reactjs.org/docs/forwarding-refs.html

#20190815 #0815

関連ページとランダムに選ばれたページ

筆者について

jigsaw(ジグソウ、1991年6月12日-)は日本のプログラマ、会社代表。本名は小林貴也(こばやし たかや)。主にウェブ、フロントエンド領域で活動している。カミング・スーン合同会社の代表社員。
さらに詳しく

寄附について

面白かったらBTCETHでの寄附をお待ちしております。
寄附のきろく