ReactのRefsとuseRefフックの使い方
Reactは宣言的なアプローチを採用しています。状態（state）を更新すると、ReactがUIを更新します。これはほとんどのタスクにおいて有効です。
しかし、時にはVirtual DOMの外に出る必要がある場面もあります。実際のHTML要素に直接アクセスする必要がある場合です。そこで登場するのが、RefsとuseRefフックです。
Refとは何か？
Refはポインタです。ReactをネイティブのDOMノードに直接接続します。
なぜuseStateではなくuseRefを使うのか？
Stateの更新は再レンダリングをトリガーします。つまり、Reactが画面上のコンポーネントを書き換えることを意味します。 Refの更新は再レンダリングをトリガーしません。そのため、値は変化するものの、すぐにUIに反映させる必要がない場合に最適です。
よくあるユースケース：
• 入力フィールドへの自動フォーカス。
• ビデオやオーディオ要素の制御（再生/一時停止）。
• 要素の幅や高さの測定。
• setIntervalやsetTimeoutのタイマーIDの保存。
useRefの使い方：
- Reactから
useRefをインポートする。 - 初期化する:
const myRef = useRef(null)。 - 要素にアタッチする:
<input ref={myRef} />。 - 値にアクセスする:
myRef.current。
例1：入力フィールドへの自動フォーカス
ユーザーがページにアクセスした際、カーソルをテキストボックス内に置きたい場合があります。この場合、コンポーネントがマウントされた後にuseEffectを使用してmyRef.current.focus()を呼び出します。
例2：ストップウォッチ
setIntervalのIDをstateに保存すると、タイマーが刻むたびにコンポーネントが再レンダリングされます。これはパフォーマンスを低下させます。IDをrefに保存すれば、コンポーネントの動作は高速なままです。値は再レンダリングの間も保持され、ブラウザに追加の負荷をかけることなく安全に管理できます。
State vs Ref:
• State: 再レンダリングをトリガーする。UIデータに使用。更新は非同期。 • Ref: 再レンダリングを行わない。DOMへのアクセスやメモリ保持に使用。更新は同期。
シニアエンジニア向けのプロのヒント：
• 過剰な使用を避ける。宣言的なロジックで対応できない場合にのみrefを使用してください。
• メモリのクリーンアップ。クリーンアップ関数内で、必ずsetIntervalやイベントリスナーを解除してください。
• レンダリング中にrefへ書き込まない。ref.currentの更新は、useEffect内またはイベントハンドラー内でのみ行ってください。これにより副作用を防げます。
• forwardRefを使用する。カスタムの子コンポーネントにrefを渡したい場合は、その子コンポーネントをReact.forwardRefでラップする必要があります。
出典: https://dev.to/banti_kevat_8e2d123bb7994/react-me-refs-aur-useref-hook-kaise-use-karein-2dde