FriendListItem.jsx

import React from 'react';
import useFriendStatus from './useFriendStatus';

export default function FriendListItem(props) {
  const isOnline = useFriendStatus(props.friend.id);

  return (
    <li style={{ color: isOnline ? 'green' : 'black' }}>
      {props.friend.name} 
    </li>
  );
}

useFriendStatus.jsx

import { useState, useEffect } from 'react';

export function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null);

  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
    return () => {
      ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
    };
  }, [handleStatusChange, ChatAPI]);

  return isOnline;
}

Export function useFriendStatus?