最終更新:2022-09-22 (木) 13:15:04 (14d)  

useRef
Top / useRef

https://ja.reactjs.org/docs/hooks-reference.html#useref

const refContainer = useRef(initialValue);

概要

  • 関数コンポーネントでは、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

  • 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>;

参考