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

これは

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

ガイドのリンク

ja.reactjs.org

カスタムフックの抽出

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

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

Reactのコンポーネントとちがい、カスタムフックは特定のシグネチャを持つ必要はない。
自分で好きに決められるのがカスタムの良いところ。
useから始めるほうがフックであることがわかりやすいのでそこは守ったほうがよい。

明日は使い方を見ていく。

今日はここまで。