ReactのuseRefでDOM要素の参照を保持

ReactのuseRefとは

ReactのuseRefフックは、Reactコンポーネント内でDOM要素やその他の値に対する参照を保持するために使用されるフックです。
主な目的は、状態の変更があっても再レンダリングをトリガーせずに参照を保持することです。

具体的には、useRefを使用すると以下のようなことができます：

1. DOM要素の参照:
useRefを使って、特定のDOM要素に直接アクセスできます。
例えば、フォームの入力フィールドやボタンなどにアクセスする場合に便利です。

import React, { useRef } from 'react';

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

 const handleClick = () => {
   // inputRef.currentはDOM要素への参照を持っています
   if (inputRef.current) {
     inputRef.current.focus();
   }
 };

 return (
   <>
     <input ref={inputRef} type="text" />
     <button onClick={handleClick}>Focus the input</button>
   </>
 );
}

2. 値の保持:
useRefはコンポーネントのライフサイクル全体で値を保持します。
これは、コンポーネントが再レンダリングされても値が変わらないことを意味します。
ただし、この値の変更は再レンダリングのトリガーにはなりません。

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

function Timer() {
 const intervalRef = useRef(null);

 useEffect(() => {
   intervalRef.current = setInterval(() => {
     console.log('Tick');
   }, 1000);

   return () => {
     clearInterval(intervalRef.current);
   };
 }, []);

 return (
   <button onClick={() => clearInterval(intervalRef.current)}>
     Stop Timer
   </button>
 );
}

こうしたように、useRefはReactコンポーネントでのDOM操作や副作用を扱う際に非常に便利です。