React カスタムフック
フックは再利用可能な関数です。
複数のコンポーネントで使用する必要があるコンポーネントロジックがある場合、そのロジックをカスタムフックに抽出できます。
カスタムフックは「使用」で始まります。例：useFetch。
フックを作る
次のコードでは、コンポーネント内のデータを取得してHomeを表示しています。
JSONPlaceholderサービスを使用して偽のデータを取得します。このサービスは、既存のデータがない場合にアプリケーションをテストするのに最適です。
詳細については、JavaScript Fetch APIセクションをご覧ください。
JSONPlaceholderサービスを使用して、偽の「todo」アイテムを取得し、ページにタイトルを表示します。
例：
index.js:
import { useState, useEffect } from "react";
import ReactDOM from "react-dom/client";
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>;
})}
</>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);
フェッチロジックは他のコンポーネントでも必要になる可能性があるため、それをカスタムフックに抽出します。
フェッチロジックを新しいファイルに移動して、カスタムフックとして使用します。
例：
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/client";
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>;
})}
</>
);
};
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);
例の説明
データをフェッチするために必要なすべてのロジックを含むuseFetchという関数を含むuseFetch.jsという新しいファイルを作成しました。
ハードコーディングされたURLを削除し、urlカスタムフックに渡すことができる変数。
最後に、フックからデータを返します。
ではindex.js、フックをインポートしuseFetch、他のフックと同様に利用しています。ここで、データを取得するURLを渡します。
これで、任意のコンポーネントでこのカスタムフックを再利用して、任意のURLからデータを取得できます。
プログラミング学習を加速させる
プログラミングをプロの講師に教えてもらいませんか。