【React】useRefの使い方 | Webエンジニア「いっしー」のブログ

動画で解説を見る

1 開発環境
2 ReactのuseRefとは
3 useRefの基本構文
4 useRefの使い方
5 おわりに

開発環境

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の基本構文は以下の通りです。

const myRef = useRef(initialValue);

1	const myRef = useRef(initialValue);

useRefの使い方

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

import './App.css';
import React, { useRef, useEffect, useState } from 'react';

function App() {
  // useRef フックを使用して、input 要素への参照を作成
  const inputElement = useRef();

  // useState フックを使用して、テキストの状態を管理
  const [text, setText] = useState("");

  // ボタンがクリックされたときに、入力されたテキストを取得して状態を更新する関数
  const handleClick = () => {
    setText(inputElement.current.value);
  };

  // コンポーネントがマウントされたときに、input 要素にフォーカスを設定
  useEffect(() => {
    inputElement.current.focus();
  }, []); // 第2引数の空の配列は、この useEffect を最初のレンダリング時にのみ実行することを示します

  return (
    <div>
      <h1>React Hooks Tutorial</h1>
      <hr />
      <h2>useRef</h2>
      {/* input 要素への参照を inputElement に設定 */}
      <input ref={inputElement} type="text" />
      {/* ボタンがクリックされたときに、handleClick 関数を実行 */}
      <button onClick={handleClick}>入力内容を確認する</button>
      {/* 入力されたテキストを表示 */}
      <p>テキスト : {text}</p>
    </div>
  );
}

export default App;

import './App.css';

import React, { useRef, useEffect, useState } from 'react';

function App() {

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

const inputElement = useRef();

// useState フックを使用して、テキストの状態を管理

const [text, setText] = useState("");

// ボタンがクリックされたときに、入力されたテキストを取得して状態を更新する関数

const handleClick = () => {

setText(inputElement.current.value);

};

// コンポーネントがマウントされたときに、input 要素にフォーカスを設定

useEffect(() => {

inputElement.current.focus();

}, []); // 第2引数の空の配列は、この useEffect を最初のレンダリング時にのみ実行することを示します

return (

<div>

<h1>React Hooks Tutorial</h1>

<hr />

<h2>useRef</h2>

{/* input 要素への参照を inputElement に設定 */}

{/* ボタンがクリックされたときに、handleClick 関数を実行 */}

<button onClick={handleClick}>入力内容を確認する</button>

{/* 入力されたテキストを表示 */}

</div>

);

}

export default App;

インポート文

import React, { useRef, useEffect, useState } from 'react';

1	import React, { useRef, useEffect, useState } from 'react';

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

useRefで参照を作成

const inputElement = useRef();

1	const inputElement = useRef();

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

useStateで状態を管理

const [text, setText] = useState("");

1	const [text, setText] = useState("");

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

handleClick関数

const handleClick = () => {
  setText(inputElement.current.value);
};

const handleClick = () => {

setText(inputElement.current.value);

};

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

useEffectで初回フォーカス設定

useEffect(() => {
  inputElement.current.focus();
}, []);

useEffect(() => {

inputElement.current.focus();

}, []);

コンポーネントが初めてレンダリングされたときに、input要素にフォーカスを設定します。

空の依存配列[]を渡すことで、このuseEffectが初回レンダリング時にのみ実行されることを示しています。

return文でのUI構築

return (
  <div>
    <h1>React Hooks Tutorial</h1>
    <hr />
    <h2>useRef</h2>
    <input ref={inputElement} type="text" />
    <button onClick={handleClick}>入力内容を確認する</button>
    <p>テキスト : {text}</p>
  </div>
);

return (

<div>

<h1>React Hooks Tutorial</h1>

<hr />

<h2>useRef</h2>

<button onClick={handleClick}>入力内容を確認する</button>

</div>

);

input要素にref属性を設定し、inputElement参照を関連付けます。

そして、ボタンをクリックするとhandleClick関数が実行され、入力されたテキストがtext状態変数として表示されます。

おわりに

ReactのuseRefの使い方について説明してきましたが、いかがだったでしょうか。

useRefによってDOMの参照がしやすくなり、useRefの値が変更されてもコンポーネントは再レンダリングされないため、パフォーマンスの向上が期待できます。

ぜひ、ReactフックのuseRefを使いこなして、効率的なReactアプリケーションを作成しましょう。