🔗

React 初心者の難問、カスタムフック（Custom Hook）を解説します

2021/08/27に公開

2件

React

frontend

tech

最近社内レビュー会で React レビューが多くなり、「カスタムフック使ったらスッキリできます」という言葉もよく聞くようになりました。

私が初めてそれを耳にしたときは「なにそれ美味しいの？」みたいな感じでしたし、初心者にはピンとこない概念かなーと思いましたので、今回のテーマにしたいと思います。

1. カスタムフックとは

カスタムフックは自分がカスタムして作るフックです。

React 公式サイトではカスタムフックをこう説明してます。

カスタムフックとは、名前が ”use” で始まり、ほかのフックを呼び出せる JavaScript の関数のことです。

でもこれだけ見たら絶対わからないと思うのでサンプルコートを一緒に見てみましょう。

2. チャットアプリの例

サンプルコートも React 公式サイトにあるものを持ってきました。

チャットアプリで友達がオンラインかオフラインかを示すメッセージを返すコンポーネントです。

import React, { useState, useEffect } from 'react';

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  if (isOnline === null) {
    return 'Loading...';
  }
  return isOnline ? 'Online' : 'Offline';
}

useStateで state と更新関数を生成、useEffect内でAPIを購読して state を更新させてますね。そうやって更新されたisOnlineに沿って文字列を返してます。コード内容自体は今回メインテーマじゃないのでざっくり理解で大丈夫です。

問題は同じロジックを別のコンポーネントでも使うときです。例えば、友達リスト画面でオンライン状態のユーザー名は緑色にする要件があるとします。

上記のFriendStatusで使ったisOnlineロジックをコピペしたら実装はできるでしょう。

import React, { useState, useEffect } from 'react';

function FriendListItem(props) {
  const [isOnline, setIsOnline] = useState(null);
  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}

ですが、同じコードが複数のコンポーネント内にあるのは気持ち悪いです。共通ロジックを別関数で作成し、コンポーネントではその関数を呼び出すだけの形にしたらキレイになりそうですね。

その共通ロジックを別関数で作成したものがカスタムフックです。

3. ロジックを切り出す

早速カスタムフックを作成してみましょう。

FriendStatusもFriendListItemも、特定ユーザーの接続状態を判別するisOnlineが必要でした。だったらユーザーIDを引数に受け取ってisOnlineを返すフックを作ったら完璧です。

hooksディレクトリを作り、その配下にuseFriendStatus.jsxというファイルを作成します。

import { useState, useEffect } from 'react';

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }

    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  });

  return isOnline;
}

上で見たコードそのままなので特に新しいことはありませんね。これでカスタムフック完成です。

３. カスタムフックのメリット

ロジックをカスタムフックで切り出したらいくつかメリットがあります。

3-1. キレイなコード

useFriendStatusを実際使ってみましょう。

function FriendStatus(props) {
 const isOnline = useFriendStatus(props.friend.id);

 if (isOnline === null) {
   return 'Loading...';
 }
 return isOnline ? 'Online' : 'Offline';
}

function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name}
    </li>
  );
}