カスタムフックに反応する
フックは再利用可能な機能です。
複数のコンポーネントで使用する必要のあるコンポーネントロジックがある場合、そのロジックをカスタムフックに抽出できます。
カスタムフックは「使用」で始まります。例：useFetch。
フックを構築する
次のコードでは、Homeコンポーネント内のデータをフェッチして表示しています。
JSONPlaceholderサービスを使用して偽のデータをフェッチします。このサービスは、既存のデータがない場合にアプリケーションをテストするのに最適です。
詳細については、 JavaScript FetchAPIセクションをご覧ください。
JSONPlaceholderサービスを使用して、偽の「todo」アイテムをフェッチし、ページにタイトルを表示します。
例：
index.js：
import { useState, useEffect } from "react";
import ReactDOM from "react-dom";
const Home = () => {
const [data, setData] = useState(null);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/todos")
.then((res) => res.json())
.then((data) => setData(data));
}, []);
return (
<>
{data &&
data.map((item) => {
return <p key={item.id}>{item.title}</p>;
})}
</>
);
};
ReactDOM.render(<Home />, document.getElementById("root"));
フェッチロジックは他のコンポーネントでも必要になる可能性があるため、カスタムフックに抽出します。
カスタムフックとして使用する新しいファイルにフェッチロジックを移動します。
例：
useFetch.js：
import { useState, useEffect } from "react";
const useFetch = (url) => {
const [data, setData] = useState(null);
useEffect(() => {
fetch(url)
.then((res) => res.json())
.then((data) => setData(data));
}, [url]);
return [data];
};
export default useFetch;
index.js：
import ReactDOM from "react-dom";
import useFetch from "./useFetch";
const Home = () => {
const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");
return (
<>
{data &&
data.map((item) => {
return <p key={item.id}>{item.title}</p>;
})}
</>
);
};
ReactDOM.render(<Home />, document.getElementById("root"));
例の説明
データをフェッチするために必要なすべてのロジックをuseFetch.js含むという関数を含むという新しいファイルを作成しました。useFetch
urlハードコードされたURLを削除し、カスタムフックに渡すことができる変数に置き換えました。
最後に、フックからデータを返します。
では、フックindex.jsをインポートしてuseFetch、他のフックと同じように利用しています。これは、データをフェッチするためのURLを渡す場所です。
これで、このカスタムフックを任意のコンポーネントで再利用して、任意のURLからデータをフェッチできます。