なぜカスタムフックか
一覧が2つになった日
第3章までで、商品一覧を API から取ってきて、読み込み中の表示とエラーの表示まで面倒を見られるようになりました。ここで fleama に「トップスの一覧」が増えます。やることはくつの一覧とまったく同じなので、書いたコードをもう1つの画面へ写します。
TypeScript (JSX)
const [items, setItems] = useState<Item[]>([]);
const [loading, setLoading] = useState(true);
useEffect(() => {
fetch("/api/items?category=shoes")
.then((res) => res.json())
.then((data: Item[]) => {
setItems(data);
setLoading(false);
});
}, []);写した先で変わるのは category=shoes の1か所だけです。残りはそっくり同じものが2つ並びます。
重複が高くつくのは、直すとき
写すのは一瞬です。高くつくのはそのあとに来ます。
- 失敗したときの再試行を足したい。2か所とも直す
- 取得中に別のカテゴリへ切り替えたときの競合を潰したい。2か所とも直す
- 片方だけ直して、もう片方を忘れる。画面によって挙動が違うという、いちばん見つけにくい不具合になる
同じロジックが n 個あると、直す手間が n 倍になり、直し忘れる確率も n 倍になります。 商品の一覧、カートの中身、購入履歴と画面が増えるほど、この n は増えていきます。
コンポーネントでは切り出せない
React入門では「同じ見た目が2か所にあるならコンポーネントにする」と習いました。しかし今回そっくりなのは見た目ではありません。state と useEffect の組み合わせ、つまりロジックのほうです。見た目は一覧とカードで別々にしたいこともあります。
見た目を持たず、ロジックだけを持ち出す入れ物。それがカスタムフックです。次のレッスンで実際に作ります。この回ではまず重複を自分の手で作って、何が二重になるのかを目で確かめておきます。
演習
トップスの一覧を、くつの一覧とまったく同じ書き方で足します。