【React】useRefの使い方

作成日: 更新日:

開発環境

  • Visual Studio Code:version 1.73.0
  • OS:Windows10
  • react:18.2.0
  • react-dom:18.2.0

ReactのuseRefとは

useRefは、レンダー時には不要な値を参照するためのReact Hookです。 Classコンポーネント時のref属性の代わりに、useRefを使って要素への参照を行いDOM 要素へのアクセスや状態の保持するために使用されます。 公式ドキュメント:https://ja.react.dev/reference/react/useRef

useRefの基本構文

useRefの基本構文は以下の通りです。

1const myRef = useRef(initialValue);

useRefの使い方

useRefの具体的な使い方を説明していきます。

1// App.js
2import './App.css';
3import React, { useRef, useEffect, useState } from 'react';
4
5function App() {
6  // useRef フックを使用して、input 要素への参照を作成
7  const inputElement = useRef();
8
9  // useState フックを使用して、テキストの状態を管理
10  const [text, setText] = useState("");
11
12  // ボタンがクリックされたときに、入力されたテキストを取得して状態を更新する関数
13  const handleClick = () => {
14    setText(inputElement.current.value);
15  };
16
17  // コンポーネントがマウントされたときに、input 要素にフォーカスを設定
18  useEffect(() => {
19    inputElement.current.focus();
20  }, []); // 第2引数の空の配列は、この useEffect を最初のレンダリング時にのみ実行することを示します
21
22  return (
23    <div>
24      <h1>React Hooks Tutorial</h1>
25      <hr />
26      <h2>useRef</h2>
27      {/* input 要素への参照を inputElement に設定 */}
28      <input ref={inputElement} type="text" />
29      {/* ボタンがクリックされたときに、handleClick 関数を実行 */}
30      <button onClick={handleClick}>入力内容を確認する</button>
31      {/* 入力されたテキストを表示 */}
32      <p>テキスト : {text}</p>
33    </div>
34  );
35}
36
37export default App;

インポート文

1// インポート文
2import React, { useRef, useEffect, useState } from 'react';

Reactとフック(useRef、useEffect、useState)をインポートしています。

useRefで参照を作成

1// useRefで参照を作成
2const inputElement = useRef();

useRefフックを使用して、input要素への参照を作成します。

useStateで状態を管理

1// useStateで状態を管理
2const [text, setText] = useState("");

useStateフックを使用して、textという状態変数とその更新関数setTextを作成します。

handleClick関数

1// handleClick関数
2const handleClick = () => {
3  setText(inputElement.current.value);
4};

ボタンがクリックされたときに実行される関数ですが、inputElementの現在の値を取得して、textの状態を更新します。

useEffectで初回フォーカス設定

1// useEffectで初回フォーカス設定
2useEffect(() => {
3  inputElement.current.focus();
4}, []);

コンポーネントが初めてレンダリングされたときに、input要素にフォーカスを設定します。 空の依存配列[]を渡すことで、このuseEffectが初回レンダリング時にのみ実行されることを示しています。

return文でのUI構築

1// return文でのUI構築
2return (
3  <div>
4    <h1>React Hooks Tutorial</h1>
5    <hr />
6    <h2>useRef</h2>
7    <input ref={inputElement} type="text" />
8    <button onClick={handleClick}>入力内容を確認する</button>
9    <p>テキスト : {text}</p>
10  </div>
11);

input要素にref属性を設定し、inputElement参照を関連付けます。 そして、ボタンをクリックするとhandleClick関数が実行され、入力されたテキストがtext状態変数として表示されます。

おわりに

ReactのuseRefの使い方について説明してきましたが、いかがだったでしょうか。 useRefによってDOMの参照がしやすくなり、useRefの値が変更されてもコンポーネントは再レンダリングされないため、パフォーマンスの向上が期待できます。 ぜひ、ReactフックのuseRefを使いこなして、効率的なReactアプリケーションを作成しましょう。

【React】useRefの使い方 | いっしー@Webエンジニア