【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 />}クラスのように使える。こっちの方がコード量が少なくて楽。
まとめ（感想文）
場合によりけり。
