React Hooks ∋ useRef

コンポーネントで返した HTML 要素を使う時に使います。HTML 要素へ渡す場合、基本的に初期値はnullを渡します。

const buttonRef = useRef(null);

要素はbuttonRef.currentに入りますが、コンポーネントがレンダリングされるまではその値はnullです。レンダリング後は狙った要素の参照が入ります。

準備

buttonRef.currentにほしい要素のref属性にこのbuttonRefを渡してあげます。

<button ref={buttonRef>
  foo
</button>