useRef
Ref は render メソッドで作成された DOM ノードもしくは React の要素にアクセスする方法を提供します。
関数コンポーネントに ref 属性を使用することはできません。
関数コンポーネントに対して ref が使用できるようにしたい場合は、forwardRef を(必要に応じて useImperativeHandle と組み合わせて)利用するか、コンポーネントをクラスに書き換えます。
コンポーネントの存在期間全体にわたって存在し続けます。
本質的に useRef とは、書き換え可能な値を .current プロパティ内に保持することができる「箱」のようなものです。
<div ref={myRef} /> のようにして React に ref オブジェクトを渡した場合、React は DOM ノードに変更があるたびに .current プロパティをその DOM ノードに設定します。
useRef は中身が変更になってもそのことを通知しないということを覚えておいてください。.current プロパティを書き換えても再レンダーは発生しません。
refオブジェクト
useRef(初期値)が返すオブジェクト
.currentプロパティを持つ
書き換え可能
値が更新されても、再レンダーされない
ref属性
HTML要素 or クラスコンポーネントに設定できる属性
ref属性にrefオブジェクトを渡すと、ref.currentにHTML要素が格納される
クラスコンポーネントに書き換える
ref属性に関数を渡す
関数コンポーネントにはref属性を使用できない
forwardRefを使うか
よく使われるのがこれっぽい
code:ts
function TextInputWithFocusButton() {
const inputEl = useRef(null);
const onButtonClick = () => {
// current points to the mounted text input element
inputEl.current.focus();
};
return (
<>
<input ref={inputEl} type="text" />
<button onClick={onButtonClick}>Focus the input</button>
</>
);
}