useRefについて - 技術メモ

現在、以下のDeep Dive into Redux Toolkit with React - Complete Guideを視聴し、React/Redux環境でのTypeScriptの記述方式やReduxToolkitについて学習しています。

www.youtube.com

その中で、ReactHooksの一種であるuseRefがプロジェクト内で使用されており、よく知らないなと思い調べたのでメモを残しておきます。

先にuseRefが何なのか述べると、useRefというのはDOMへアクセスしたいときか、状態を保持したいときに利用するものらしいです。
後者はuseState管理でもできますが、異なる点は状態が更新されても再レンダリングされないところです。なので、そういったシチュエーションの場合はuseRefを使用した方が良いことがわかりました。

動画内では下記のようにuseRefを使用しています。これはDOMへアクセスしたいときの使い方です。

const editInput = useRef<HTMLInputElement>(null); // ①

...// 省略

useEffect(() => {
  if (isEditMode) {
    editInput.current.focus(); // ③
  }
}, [isEditMode]);

...// 省略

<form onSubmit={handleUpdate}>
  <label htmlFor="edit-todo">Edit:</label>
  <input
     ref={editInput} // ②
     onChange={handleEditInputChange}
     value={editTodoInput}
  />
  <button type="submit">Update</button>
  <button onClick={handleCancelUpdate}>Cancel</button>
</form>

①
初期値をnullとしてuseRefを用いた変数を定義します。このとき、この変数自体はinputタグの中に仕込むので、型はHTMLInputElementを設定しておきます。
②
inputタグに①で定義したeditInputを組み込みます。これでeditInputからDOM操作を行えます。
③
isEditMode(編集可能な状態)がtrueであれば、editInput.current.focus()でinputタグにアクセスしフォーカスを当てることができます。

公式ドキュメントの例では、インスタンス変数として状態を保持したいときの使用方法の例も掲載されています。ここではタイマーIDの値を保存するために使用しています。