Changing state in React causes error 429 with Azure SignalR - reactjs

Question

I am trying to make a React app with Azure SignalR, using this tutorial as a base. I haven't changed anything about the SignalR server, which can be found here. I'm using the JS version. The app works fine otherwise, but whenever the state changes, requests are sent to SignalR or something along those lines, eventually causing a 429 error. This is the output when state changes once:
[2020-01-09T15:11:42.207Z] Information: Normalizing '/api' to 'http://localhost:3000/api'.
[2020-01-09T15:11:42.437Z] Information: WebSocket connected to wss://bpm-drawing.service.signalr.net/client/?hub=chat&id=5_gylFnC52hduxXnoFT7dgb3b5d12b1&access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYmYiOjE1Nzg1ODI3MDIsImV4cCI6MTU3ODU4NDUwMiwiaWF0IjoxNTc4NTgyNzAyLCJhdWQiOiJodHRwczovL2JwbS1kcmF3aW5nLnNlcnZpY2Uuc2lnbmFsci5uZXQvY2xpZW50Lz9odWI9Y2hhdCJ9.byfLiITpaUPm9OLxjn-EN8XcwDT3_j6tdoN2uSdR91k.
[2020-01-09T15:11:42.440Z] Information: Using HubProtocol 'json'.
Enough consequent state changes cause a 429 error. Some of the error messages:
WebSocket connection to 'wss://bpm-drawing.service.signalr.net/client/?hub=chat&id=zer-1PBd58usOkZ2n-3Wuwb3b5d12b1&access_token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYmYiOjE1Nzg1ODI4OTYsImV4cCI6MTU3ODU4NDY5NiwiaWF0IjoxNTc4NTgyODk2LCJhdWQiOiJodHRwczovL2JwbS1kcmF3aW5nLnNlcnZpY2Uuc2lnbmFsci5uZXQvY2xpZW50Lz9odWI9Y2hhdCJ9.t7HPErziiAbQX1PLONvtF3tSHa4ezcBNgAhb0tgNJYA' failed: Error during WebSocket handshake: Unexpected response code: 429
[2020-01-09T15:14:59.060Z] Error: Failed to start the transport 'WebSockets': Error: There was an error with the transport.
POST https://bpm-drawing.service.signalr.net/client/negotiate?hub=chat&negotiateVersion=1 429
[2020-01-09T15:14:59.143Z] Error: Failed to complete negotiation with the server: Error
[2020-01-09T15:14:59.148Z] Error: Failed to start the connection: Error
Errors.ts:20 Uncaught (in promise) Error
at new HttpError (Errors.ts:20)
at XMLHttpRequest.xhr.onload (XhrHttpClient.ts:70)
I stripped my code down quite a bit but this is enough to cause the error:
import React from "react";
const signalR = require("#microsoft/signalr");
export const App = () => {
const [message, setMessage] = React.useState("");
const connection = new signalR.HubConnectionBuilder()
.withUrl(`/api`)
.configureLogging(signalR.LogLevel.Information)
.build();
connection.onclose(() => console.log("disconnected"));
connection.start();
function updateMsg(e) {
e.preventDefault();
setMessage(e.target.value);
}
return (
<div>
<form>
<input
type="text"
placeholder="Type message here..."
onChange={updateMsg}
/>
</form>
</div>
);
};
export default App;
The npm server just has a lot of
[HPM] POST /api/negotiate?negotiateVersion=1 -> http://localhost:7071

Answer 1

Okay so the problem is that the code inside App is run every time state updates, so the connection is formed again. Still haven't figured out quite how to solve it but at least I know what the cause is.
EDIT: Since I was asked, the solution is to put the forming of the connection inside a 'useEffect' hook, so that it's only run once, when the component is mounted.