you should move the connection logic to a module. that you import.
import hub from "hubConnection";
your component will need to subscribe and unsubscribe to messages, signal/r does not support this so your module should.
useEffect(() => {
hub.on("ReceiveMessage", handler)
return function() {
hub.off("ReceiveMessage", handler);
}
}
I assume the hub code would subscribe to the messages, and have dispatch array for each.
const conn = hub.getConnection(); // return the promise returned by start. you want a function to handle reconnect logic