refactor(websocket): move websocket from state to class property

- Replace `this.state.ws` with `this.websocket` class property for better encapsulation
- Add hot module replacement in index.js for improved development experience

BREAKING CHANGE: WebSocket access pattern changed from state to direct property, may affect external integrations relying on state

src/App.js

@@ -5,8 +5,8 @@ class App extends React.Component {
     super(props);
     this.state = {
       counter: 0,
-      ws: null,
     };
+    this.websocket = null;
     this.pingInterval = null;
   }
 
@@ -19,18 +19,17 @@ class App extends React.Component {
 
     // Connect to WebSocket - use dynamic URL based on current location
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
-    const websocket = new WebSocket(`${protocol}//${window.location.host}/counter-ws`);
-    this.setState({ ws: websocket });
+    this.websocket = new WebSocket(`${protocol}//${window.location.host}/counter-ws`);
 
-    websocket.onopen = () => {
+    this.websocket.onopen = () => {
       console.log('WebSocket connected');
     };
 
-    websocket.onerror = (error) => {
+    this.websocket.onerror = (error) => {
       console.log('WebSocket error:', error);
     };
 
-    websocket.onmessage = (event) => {
+    this.websocket.onmessage = (event) => {
       const data = JSON.parse(event.data);
       if (data.type === 'counter-update') {
         this.setState({ counter: data.value });
@@ -40,14 +39,14 @@ class App extends React.Component {
       }
     };
 
-    websocket.onclose = (event) => {
+    this.websocket.onclose = (event) => {
       console.log('WebSocket disconnected', 'Code:', event.code, 'Reason:', event.reason);
     };
 
     // Send ping every 30 seconds to keep connection alive
     this.pingInterval = setInterval(() => {
-      if (websocket.readyState === WebSocket.OPEN) {
-        websocket.send(JSON.stringify({ type: 'ping' }));
+      if (this.websocket.readyState === WebSocket.OPEN) {
+        this.websocket.send(JSON.stringify({ type: 'ping' }));
       }
     }, 30000);
   }
@@ -56,8 +55,8 @@ class App extends React.Component {
     if (this.pingInterval) {
       clearInterval(this.pingInterval);
     }
-    if (this.state.ws) {
-      this.state.ws.close();
+    if (this.websocket) {
+      this.websocket.close();
     }
   }
 
@@ -69,8 +68,8 @@ class App extends React.Component {
       .then(data => {
         this.setState({ counter: data.value });
         // Broadcast update via WebSocket
-        if (this.state.ws && this.state.ws.readyState === WebSocket.OPEN) {
-          this.state.ws.send(JSON.stringify({ type: 'counter-update', value: data.value }));
+        if (this.websocket && this.websocket.readyState === WebSocket.OPEN) {
+          this.websocket.send(JSON.stringify({ type: 'counter-update', value: data.value }));
         }
       })
       .catch(error => console.error('Error incrementing counter:', error));

src/index.js

@@ -3,4 +3,13 @@ import ReactDOM from 'react-dom/client';
 import App from './App';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
+
+const renderApp = () => {
   root.render(<App />);
+};
+
+renderApp();
+
+if (module.hot) {
+  module.hot.accept('./App', renderApp);
+}