deve.K

エンジニアが未来を切り開く。

React カスタムフックとは 作り方 基礎

reactcustomhook画像

本日はReact Hookの『Custom Hook』(独自フック)について、『基本的』な扱い方を初学様に向けて解説していきます。

以前のReact基礎で記事にしたデータ取得の流れで今回もいきたいと思います。

カスタム(独自)フックを作成し『useEffect』でデータのフェッチをし、そのデータを表示していきます。

『useEffect』の理解に精通してない場合はまずはこちらで学んでみて下さい。

dev-k.hatenablog.com

dev-k.hatenablog.com

カスタムフックとは

Reactでは、独自のカスタムフックを作成する事ができます。

共通のステートロジックを使用する複数でのコンポーネントに同じコードを記述していく変わりに、そのコードをカスタム(独自)フック内に配置し再利用が可能となります。

つまりカスタムフックの主な目的としては、コンポーネントで使用されるロジックでの再利用を容易にすることとなります。

より読みやすくなる関数として活用でき

フックのルールに準拠している限りは、他のフックを使用できるJavaScript関数となります。

それらルールは以下となります。


•『ループ』『条件』または『ネスト』された関数の内部からフックを呼び出さない。

• 通常の関数からフックを呼び出さない。

• React機能コンポーネントからのみフックを呼び出す。

• フックはコンポーネントのトップに配置する必要がある。

• 先程おっしゃいましたがフックは他のフックを呼び出すことができます。


コードを別の関数としてリファクタリングして再利用ができるものと思っておいて下さい。

そしてカスタムフックを使用する際の名前は『use』という単語で始まる必要があります、これは命名規則となっておりますので注意して下さい。

サーバーからデータをフェッチし、毎度プロセス全体を覚えておく必要があると想像してみて下さい。

カスタム関数を作成すると、結果を自由に返すことも容易となります。

それでは『create-react-app』のご準備をお願い致します。

『useFetch』フックを作りましょう。

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return data;
};

export default useFetch;
import React from "react";
import useFetch from "./useFetch";

const App = () => {

 const data = useFetch("https://jsonplaceholder.typicode.com/todos");
  return (
    <div>
      <ul>
        {data.map(el => (
          <li key={el.id}>{el.title}</li>
        ))}
      </ul>
    </div>
  );
}

DEMO

・delectus aut autem
・quis ut nam facilis et officia qui
・fugiat veniam minus
・et porro tempora
・laboriosam mollitia et enim quasi adipisci quia provident illum
・qui ullam ratione quibusdam voluptatem quia omnis
・illo expedita consequatur quia in
・quo adipisci enim quam ut ab
・molestiae perspiciatis ipsa
・illo est ratione doloremque quia maiores aut
・vero rerum temporibus dolor
・ipsa repellendus fugit nisi
・et doloremque nulla
// 以下省略

See the Pen React カスタムフック fetch by dev.K | Webアプリ開発者 (@enjinia_f) on CodePen.

Custom Hooks扱い方

解説致します。

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, []);

  return data;
};

export default useFetch;

独自フックでは、『useState』フックを内部で使用して、独自の状態を作成していきます。

『useEffect』フックを使用してAPIを呼び出します。

この関数は『Javascript関数』なので、必要に応じて何でも返すことができ

他のReactフックを使用しているため、その関数はカスタムフックと呼ばれます。

App関数コンポーネントの『 状態』と『操作』は独自カスタムの管理下にあります。

import React from "react";
import useFetch from "./useFetch";

const App = () => {

 const data = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <div>
      <ul>
        {data.map(el => (
          <li key={el.id}>{el.title}</li>
        ))}
      </ul>
    </div>
  );
}

ロジックをReactフックにカプセル化し共有します、その都度必要に応じて作成したフックをインポートし使用していきます。

『JSONPlaceholder』サービスを使用してサンプルのデータをフェッチします。

これは、既存のデータがない場合にアプリケーションをテストするのに最適なので是非活用下さい。

カスタムフック『useFetch』を『data』変数に置き換えます。

その後returnでフックからマップ関数を使用しデータを返し

コンポーネントがマウントされたときにデータをフェッチし表示します。

こうする事で、このカスタムフックを任意のコンポーネントで再利用し、任意のURLからデータをフェッチする事が可能となります。

カスタムフックは、複雑な問題を処理するために単純化されたコードとして分割するための強力で便利な方法を貴方に提供します。

これは貴方の生産性を向上させ、貴方の時間を節約します。

本日はここまでにしておきたいと思います。

最後まで読んで頂きありがとうございました。

プライバシーポリシー