Best implementation using socket.io in ReactJS application

Context:

• I'm building an application where you can access multiple discussions (with an infinity of users in each discussions).
• The user connected should receive notifications from every discussions he has subscribed to.
• He can send and see messages like in any live-chat application.

My question is about the implementation.

I thought about :

• making my socket available through a context provider, but I think this can make the error handling / listening to specific events quite complex because there will be a lot of parts in the app (listing of discussions, current discussions, notifications from discussions not viewable at the moment etc.),
• put the socket in the state but the problem is that it's going to render everything at every disconnection / reconnection etc.

Last question:

• is it best to handle historical messages via API and leave the socket for real-time purpose only?

Does someone has already faced a similar situation, and what was your choice of implementation and why?

Thanks a lot!