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

これは

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

ガイドのリンク

ja.reactjs.org

カスタムフックを使う

昨日の続き。
useFriendStatus に抽出したので、それを使えばよいだけ。
基本的にふるまいに変化はなし。
「カスタムフックは React の機能というよりは、フックの設計から自然と導かれる慣習のようなものです。」
とのことなので、useという名前で始めるべきというルールはあるものの、自由に使える。

フックは関数なので、フック間で情報を受け渡すことができる。

const friendList = [
  { id: 1, name: 'Phoebe' },
  { id: 2, name: 'Rachel' },
  { id: 3, name: 'Ross' },
];

function ChatRecipientPicker() {
  const [recipientID, setRecipientID] = useState(1);
  const isRecipientOnline = useFriendStatus(recipientID);

  return (
    <>
      <Circle color={isRecipientOnline ? 'green' : 'red'} />
      <select
        value={recipientID}
        onChange={e => setRecipientID(Number(e.target.value))}
      >
        {friendList.map(friend => (
          <option key={friend.id} value={friend.id}>
            {friend.name}
          </option>
        ))}
      </select>
    </>
  );
}

useStateフックはrecipientID というstate変数に保持して、ピッカー内で別のフレンドが選択されるごとに更新をする。

明日はuseYourImagination()についてみていきます。

今日はここまで。