【React】フックのプロパティの名前の衝突を回避する

Reactでフックのプロパティの名前の衝突を回避したい！

概要

今回の記事では、Reactでフックのプロパティの名前の衝突を回避する手順を掲載する。

仕様書

環境

• typescript 5.2.2
• react 18.2.0

手順書

こんな感じでカスタムフックがあると

const { login, isLoading, error, response } = useFetchLogin();
const { logout, isLoading, error, response } = useFetchLogout();

isLoadingとerrorとresponseが重複しちゃってエラーになる。

このエラーの回避方法は状況によっていろいろあるんだけども、よく使いそうなのの例を挙げる。

エイリアスを使う

const { login, isLoading: loginIsLoading, error: loginError, response: loginResponse } = useFetchLogin();
const { logout, isLoading: logoutIsLoading, error: logoutError, response: logoutResponse } = useFetchLogout();

{loginIsLoading && <Spinner />}

辞書型の値の部分がエイリアス名になる感じ。好きな名前を使いたい場合によさそう。

スプレッド構文を使う

const fetchLogin = useFetchLogin();
const fetchLogout = useFetchLogout();

{fetchLogin.isLoading && <Spinner />}

クラスのように使える。こっちの方がコード量が少なくて楽。

まとめ（感想文）

場合によりけり。