最終更新:2023-07-21 (金) 17:31:13 (133d)
useRef
Top / useRef
https://ja.reactjs.org/docs/hooks-reference.html#useref
const refContainer = useRef(initialValue);
使い方
- DOMへの参照
- “ref” オブジェクトは汎用のコンテナであり、その current プロパティの値は書き換え可能かつどのような値でも保持することができるのでクラスのインスタンス変数と同様に利用可能
https://ja.reactjs.org/docs/hooks-faq.html#is-there-something-like-instance-variables
概要
- 関数コンポーネントでは、Classコンポーネント時のref属性の代わりに、useRefを使って要素への参照を行います。
- .current プロパティが渡された引数 (initialValue) に初期化されているミュータブルな ref オブジェクトを返します。
- 返されるオブジェクトはコンポーネントの存在期間全体にわたって存在し続けます。
.current
- 初期値がinitialValue
動作
- <div ref={myRef} /> のようにしてReactにrefオブジェクトを渡した場合、ReactはDOMノードに変更があるたびに .currentプロパティをそのDOMノードに設定します。
- .current プロパティを書き換えても再レンダーは発生しません。
メモ
const inputRef = useRef<HTMLInputElement>(null!);
- にするか、
const inputRef = useRef<HTMLInputElement>(null);
- として参照時にif(inputRef.current){...}とnullチェックをする
戻り値
- 初期値と型引数の与え方によって返り値の型がRefObjectとMutableRefObject?のどちらかになる
https://zenn.dev/berlysia/articles/624bc1aaffda58
https://qiita.com/hinako_n/items/d08a43674afb5969549b
RefObject
- hooks登場以前からのRefObject。
- .currentの初期値はnullであり、.currentに readonly の制約が付いている。
MutableRefObject?
- hooksによりできた値を保持するという用例に対応するため、 readonlyの制約がない
オーバーロード
/* snip */ function useRef<T>(initialValue: T): MutableRefObject<T>; /* snip */ // convenience overload for refs given as a ref prop as they typically start with a null value function useRef<T>(initialValue: T|null): RefObject<T>; /* snip */ // convenience overload for potentially undefined initialValue / call with 0 arguments // has a default to stop it from defaulting to {} instead function useRef<T = undefined>(): MutableRefObject<T | undefined>;
