最終更新:2023-07-21 (金) 17:31:13 (279d)  

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

React hooks: accessing up-to-date state from within a callback

↑

参考




検索：