Reactガイドを読んでいくその263
これは
Reactのガイドを読んでいく記事です。
ガイドのリンク
カスタムフックを使う
昨日の続き。
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()についてみていきます。
今日はここまで。