ここではReact hookの１つ、useRefについて紹介します。

useRefとは

useRefは、React.createRefの返り値であるRefオブジェクトを返すhookです。ここでRefオブジェクトとは、「コンポーネントがマウントされたときからアンマウントされるときまで存在し続ける、書き換え可能なオブジェクト」を言います。公式ドキュメントにはRefを利用するのに適した例として、

• フォーカス、テキストの選択およびメディアの再生の管理
• アニメーションの発火
• サードパーティの DOM ライブラリとの統合

といったケースが紹介されています。ただしコンポーネントに親子関係がある場合、基本的に子コンポーネントの詳細は親に対して隠蔽されていますが、Refを利用すると親が子の詳細を知らなくてはならない=依存関係が生まれてしまうため、Refに頼りすぎない実装が推奨されています。一般的なReactデータフローといえる「propsを使った親・子のやりとり」をベースに考えましょう、ということですね。
（→ReactのRefを理解したい）

useRefの利用例

実際のuseRefの利用例として、以前紹介したuseState, useEffectと組み合わせ「初回レンダリングかどうかで要素を出し分ける」実装を紹介します。なおコードは『React Hooks 入門』よりお借りしました。

import React, { useState, useEffect, useRef } from "react";export default function App() {  const [count, setCount] = useState(0);  // 初回レンダリングかどうかのフラグ  // isInitialRender.currentの初期値にtrueを指定  const isInitialRender = useRef(true);  useEffect(() => { if (isInitialRender.current) {// 以下のようにRefオブジェクトを更新しても// コンポーネントは再レンダリングされないisInitialRender.current = false; }  });  return ( <><p>{isInitialRender.current?"初回レンダリング":"再レンダリング"}</p><p>count: {count}</p><button onClick={()=>setCount(count+1)}> + </button> </>  );}