【React】useRefについて

Writer：tokuyasu　更新日：2023/11/14

こんにちは、デジナーレ福岡オフィスの徳安です。

この記事では、useRef()について説明します。

useRefとは

useRef は、レンダー時には不要な値を参照するための React フックです。

と公式ドキュメントに記載がある。

少し理解しにくいので、簡単に説明すると、

useRefとは、要素の参照を行うためのフックで、

主にDOMへのアクセスに利用される。

useRefはコンポ－ネント内において変数に値を保持することができ、

値を更新してもコンポーネントが

再レンダリングされることはない。

値を保持できるといった面では、useStateと同じだが、

useStateは値が変更されるたびに再レンダリングされる

といった点は異なる。

useRefを利用することで、

無駄な再レンダリングを抑えることが可能になる。

構文

const ref = useRef(initialValue)

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オブジェクトを渡す。

import { useRef } from "react";
const inputRef = useRef(null);

const App = () => {
  const inputRef = useRef(null);

  return <input ref={inputRef} />;
};

import { useRef } from "react";

const inputRef = useRef(null);

const App = () => {

const inputRef = useRef(null);

return <input ref={inputRef} />;

};

refオブジェクトのcurrentプロパティに

そのDOMノードが設定される。

作成した、DOMノードにアクセスして、

focus()などのメソッドを呼び出すことが可能になる。

const Click = () => {
  inputRef.current.focus();
};

const Click = () => {

inputRef.current.focus();

};

Reactは、ノードが画面から削除されると

currentプロパティにnullを戻す。

refとstate

refとstateの違い

ここまで読み進めていただきありがとうございます。

【React】React.memoについて【React】useContextについて

tokuyasuの
他の記事を読む

TypeScript慣れしたフロントエンドエンジニアがPythonの型ヒントに挑戦してみた

2025/10/23
Next.jsとは

2025/05/09

tokuyasuの記事一覧

スタッフブログ一覧

お問い合わせCONTACT

お問い合わせ

Contact

フォームよりお気軽にお問い合わせください。
担当者より折り返しご連絡いたします。

採用情報

Recruit

新しいサービス・事業にチャレンジしたい
メンバーを募集しています。