![株式会社デジナーレ[designare]](https://designare.jp/wp-content/themes/designare_new/img/logo.svg){kind=logo}
Writer： tokuyasu 更新日：2023/11/14
こんにちは、デジナーレ福岡オフィスの徳安です。
この記事では、useRef()について説明します。
useRefとは
と公式ドキュメントに記載がある。
少し理解しにくいので、簡単に説明すると、
useRefとは、要素の参照を行うためのフックで、
主にDOMへのアクセスに利用される。
useRefはコンポ－ネント内において変数に値を保持することができ、
値を更新してもコンポーネントが
再レンダリングされることはない。
値を保持できるといった面では、useStateと同じだが、
useStateは値が変更されるたびに再レンダリングされる
といった点は異なる。
useRefを利用することで、
無駄な再レンダリングを抑えることが可能になる。
構文
|
1 |
const ref = useRef(initialValue) |
コンポーネントのトップレベルで
useRefを呼び出して、refを宣言する。
引数
initialValue: ref オブジェクトの
current プロパティの初期値として設定する値。
この引数は２回目以降のレンダーでは無視される。
返り値
渡した initialValue が初期値に設定される。
refオブジェクトをJSXノードのref属性としてReactに渡すと、
Reactはcurrentプロパティの値を返す。
refのDOM操作
初期値をnullに設定したrefオブジェクトを宣言し、
操作したDOMノードのJSXのref属性に、
refオブジェクトを渡す。
|
1 2 3 4 5 6 7 8 |
import { useRef } from "react"; const inputRef = useRef(null); const App = () => { const inputRef = useRef(null); return <input ref={inputRef} />; }; |
refオブジェクトのcurrentプロパティに
そのDOMノードが設定される。
作成した、DOMノードにアクセスして、
focus()などのメソッドを呼び出すことが可能になる。
|
1 2 3 |
const Click = () => { inputRef.current.focus(); }; |
Reactは、ノードが画面から削除されると
currentプロパティにnullを戻す。
refとstate
refとstateの違い
ここまで読み進めていただきありがとうございます。
