Reactガイドを読んでいくその273

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

フック API リファレンス

useImperativeHandle

useImperativeHandle(ref, createHandle, [deps])

refが使われたときに親コンポーネントに渡されるインスタンス値をカスタマイズするのに使う。
refを使った手続き的なコードは基本的には避けるべきであることを認識しておく必要がある。

useImperativeHandleはforwardRefと組み合わせて使う。
例として以下のようなコードがある。

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

をレンダーする親コンポーネントはinputRef.current.focus() を呼べるようになる。

今日はここまで。