React: Subscribe to events in Child Components

[da5idf]

The How to use with React Guide provides the documentation below. I only need to have an open connection in a specific part of my application. So as outlined in the Disconnection section, I plan to run the code snippet provided in the Child Component of my app that requires the open connection. However, is it still best practice to subscribe to events in the App Component (or in a Context wrapper)? The second section below, Listeners in a child component, strongly advises against subscribing to events in child components. My plan was to subscribe to events in the component that opens the connection. But after reading this documentation, it seems this is bad practice. Am I reading this correctly? Specifically,

1. Is it OK to open the socket connection in a child component
2. If Yes, is it better to subscribe to events in the same child component or in the App Component/Context?

Disconnection
If you need to close the Socket.IO client when your component is unmounted (for example, if the connection is only needed in a specific part of your application), you should:

• ensure socket.connect() is called in the setup phase:

useEffect(() => {
  // no-op if the socket is already connected
  socket.connect();

  return () => {
    socket.disconnect();
  };
}, []);

Listeners in a child component
We strongly advise against registering event listeners in your child components, because it ties the state of the UI with the time of reception of the events: if the component is not mounted, then some messages might be missed.
src/components/MyComponent.js

import React from 'react';

export default function MyComponent() {
  const [fooEvents, setFooEvents] = useState([]);

  useEffect(() => {
    function onFooEvent(value) {
      setFooEvents(previous => [...previous, value]);
    }

    // BAD: this ties the state of the UI with the time of reception of the
    // 'foo' events
    socket.on('foo', onFooEvent);

    return () => {
      socket.off('foo', onFooEvent);
    };
  }, []);

  // ...
}