ReactフックuseRef【基本】

useRefは、コンポーネント内でデータを保持したり、DOM要素に直接アクセスしたりするのに非常に便利なフックです。

useRefとは？

useRefは、「参照（Reference）」を作成するためのフックです。

通常、状態管理にはuseStateを使いますが、
useRefは再レンダリングを発生させずにデータを保持したい場合に使います。

• 再レンダリングを引き起こさない：
  useRefで保持した値が変化しても、コンポーネントは再レンダリングされません。
• .currentプロパティ：
  useRefはオブジェクトを返し、その中の.currentプロパティに値を保持します。

useRefとuseStateの違い

useRefの基本的な使い方

• useRef(0)：
  初期値を0に設定した参照を作成します。
• countRef.current：
  現在の値を取得または更新します。
• コンソールにクリック回数が表示されますが、画面上の表示は変わりません。

App.jsx

import React, { useRef } from 'react';

function App() {
  const countRef = useRef(0);

  const handleClick = () => {
    countRef.current += 1;
    console.log(`クリック回数: ${countRef.current}`);
  };

  return (
    <div>
      <button onClick={handleClick}>クリックしてね！</button>
    </div>
  );
}

export default App;

useRefでDOM要素へのアクセス

useRefは、直接DOM要素にアクセスしたい場合にも使われます。

• <input ref={inputRef} />：
  input要素に参照を設定します。
• inputRef.current.focus()：
  input要素にフォーカスを当てます。

App.jsx

import React, { useRef } from 'react';

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

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

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>フォーカスを当てる</button>
    </div>
  );
}

export default App;

実践的な例：タイマーの作成

Timer.jsx

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

function Timer() {
  const [time, setTime] = useState(0);
  const timerRef = useRef(null);

　// タイマーを開始する関数
  const startTimer = () => {
    if (timerRef.current !== null) return;
    timerRef.current = setInterval(() => {
      setTime((prev) => prev + 1);
    }, 1000);
  };

　// タイマーを停止する関数
  const stopTimer = () => {
    clearInterval(timerRef.current);
    timerRef.current = null;
  };

  return (
    <div>
      <h1>時間: {time}秒</h1>
      <button onClick={startTimer}>開始</button>
      <button onClick={stopTimer}>停止</button>
    </div>
  );
}

export default Timer;

• setInterval()：
  指定した時間間隔（ミリ秒）ごとに関数を繰り返し実行します。
  ここでは1000ミリ秒（1秒）ごとにsetTimeを呼び出しています。
  • 返り値：
    setIntervalはタイマーIDを返します。
    このIDは後でタイマーを停止するために使用します。

timerRef.current = setInterval(() => {
  setTime((prevTime) => prevTime + 1);
}, 1000);

• clearInterval()：
  setIntervalで設定したタイマーを停止します。
  • 引数：
    setIntervalの返り値であるタイマーIDを指定します。

clearInterval(timerRef.current);