Reactガイドを読んでいくその261

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

独自フックの作成

独自のフックを作成することでコンポーネントからロジックを抽出して再利用可能な関数を作ることが可能。

以下の例はフレンドがオンラインかオフラインかを示すメッセージを出力するもの。

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';
}

ここで緑色で表示したいとした場合新しいFriendListItemコンポーネントに似たようなロジックを
コピペしてもいいが理想的ではない。
代わりにロジックを FriendStatus と FriendListItemで共有したい。
従来のやり方ではレンダープロップと高階コンポーネントを使うことで対応しましたが、カスタムフックを使うことで解決できるかもしれない。

明日はその方法を見ていく

今日はここまで。