title: React Custom Hooks fetch data globally and share across components?
body: <p>in this react example from <a href="https://reactjs.org/docs/hooks-custom.html" rel="noreferrer">https://reactjs.org/docs/hooks-custom.html</a>, a custom hook is used in 2 different components to fetch online status of a user... </p>
  
  <pre><code>function useFriendStatus(friendID) {
    const [isOnline, setIsOnline] = useState(null);
  
    useEffect(() =&gt; {
      function handleStatusChange(status) {
        setIsOnline(status.isOnline);
      }
  
      ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);
      return () =&gt; {
        ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);
      };
    });
  
    return isOnline;
  }
  </code></pre>
  
  <p>then its used in the 2 functions below:</p>
  
  <pre><code>function FriendStatus(props) {
    const isOnline = useFriendStatus(props.friend.id);
  
    if (isOnline === null) {
      return 'Loading...';
    }
    return isOnline ? 'Online' : 'Offline';
  }
  
  function FriendListItem(props) {
    const isOnline = useFriendStatus(props.friend.id);
  
    return (
      &lt;li style={{ color: isOnline ? 'green' : 'black' }}&gt;
        {props.friend.name}
      &lt;/li&gt;
    );
  }
  </code></pre>
  
  <p>my question is, will the function be executed individually everywhere where it is imported into a component? Or is there some thing like sharing the state between components, if it is defined as a separate exported function? e.g I execute the function only once, and the "isOnline" state is the same in all components?</p>
  
  <p>And if its individually fetched, how would I have to do it to fetch data only once globally, and then pass it to different components in my React app?</p>