Zenn
🤣

React Hooksの10種類を理解する（Additional: useImperativeHandle）

2021/08/10に公開
React
React Hooks
tech

React Hooksの10種類を理解する（Additional: useImperativeHandle）

前提知識(Tips)

下層のDOM componentにrefを「転送」する

function SampleButton(props) {
  return (
    <button className="SampleButton">
      {props.children}
    </button>
  );
}

通常であれば、buttonの関数componentはおおよそこのような感じとなる。
このSampleButtonを使用する他のcomponentは、内側のbuttonDOM要素に対するrefを取得する必要はない。
しかし、ときにこのような末梢のcomponentは、通常のDOM(inputやbuttonなど)と同様のの頻度で使用されることがあり、
focusやselect, animationなどにおいてDOMノードにアクセスせざるをえない状態になるかもしれない。
React.forwardRefは、渡されたrefを受け取って、それをさらに下層のcomponentに渡すことができるようになる。

const SampleButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="SampleButton">
    {props.children}
  </button>
));

const ref = React.createRef();
<SampleButton ref={ref}>Click me!</SampleButton>;

useImperativeHandle

useImperativeHandleは、refが使用された際の親コンポーネントに渡されるinstance値をカスタマイズするhooksである。forwardRefとともに用いる。

function FancyInput(props, ref) {
  const inputRef = useRef();

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

reference

GitHubで編集を提案

Discussion