useItemsを作る

React状態管理：カスタムフック・Context・Reducer / 全 6 枚

12行が呼び出し1行に

取得のコードを直接書いた場合と、useItems を呼ぶだけにした場合を比べてください。

ShoesList に直接書く

useEffect(() => {
  fetch("/api/items?category=shoes")
    .then((r) => r.json())
    .then((d) => setItems(d));
}, []);

useItemsを呼ぶだけ

const { items, loading } =
  useItems("shoes");

12行あった取得の手続きが、呼び出し1行に変わります。

1 / 6

← → キーでも送れます