独自フックの作成を読む
https://ja.reactjs.org/docs/hooks-custom.html
カスタムフックの抽出
useFriendStatus コンポーネントの例
code:js
import { useState, useEffect } from 'react';
function useFriendStatus(friendID) {
// 引数にfriendID
const isOnline, setIsOnline = useState(null);
useEffect(() => {
function handleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
return () => {
ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
};
});
return isOnline;
}
// コンポーネント1
function FriendStatus(props) {
const isOnline = useFriendStatus(props.friend.id);
if (isOnline === null) {
return 'Loading...';
}
return isOnline ? 'Online' : 'Offline';
}
// コンポーネント2
function FriendListItem(props) {
const isOnline = useFriendStatus(props.friend.id);
return (
<li style={{ color: isOnline ? 'green' : 'black' }}>
{props.friend.name}
</li>
);
}