I have a React app with many pages. Inside one of the pages, I need real-time communication with the server. So, we started using socket.io. But, the doc said as follow

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.

When the event is emmited, we are updating the data of certain endpoints which are only being used in that one specific page/component. If I were to register events at the root level, that means that event will always be triggering. So, the data will always be updated. We don’t care about the data update unless user is on that specific page.

What is the good practice and what should be done?