Building Real-Time Applications with React and WebSockets

{
  "title": "Building Real-Time Applications with React and WebSockets",
  "description": "Techniques for implementing real-time data communication in React apps using WebSockets.",
  "category": "React Cursor Rules",
  "rules": [
    {
      "name": "use-websocket-libraries",
      "description": "Utilize established WebSocket libraries like 'socket.io' or 'ws' for robust and efficient WebSocket communication.",
      "applyTo": "src/**/*.js",
      "recommendation": "Implement WebSocket communication using 'socket.io' or 'ws' to ensure reliability and maintainability."
    },
    {
      "name": "manage-websocket-lifecycle",
      "description": "Properly manage the WebSocket connection lifecycle to prevent memory leaks and ensure optimal performance.",
      "applyTo": "src/**/*.js",
      "recommendation": "Establish WebSocket connections in 'componentDidMount' and close them in 'componentWillUnmount' to manage resources effectively."
    },
    {
      "name": "handle-websocket-errors",
      "description": "Implement comprehensive error handling for WebSocket connections to enhance application stability.",
      "applyTo": "src/**/*.js",
      "recommendation": "Use 'onerror' and 'onclose' event handlers to manage WebSocket errors and reconnection logic."
    },
    {
      "name": "use-state-management",
      "description": "Integrate WebSocket data with state management solutions like Redux or Context API for consistent state updates.",
      "applyTo": "src/**/*.js",
      "recommendation": "Dispatch actions or update context when receiving WebSocket messages to keep the application state synchronized."
    },
    {
      "name": "secure-websocket-communication",
      "description": "Ensure WebSocket communication is secure, especially when transmitting sensitive data.",
      "applyTo": "src/**/*.js",
      "recommendation": "Use 'wss://' protocol for secure WebSocket connections and implement authentication mechanisms as needed."
    },
    {
      "name": "optimize-websocket-performance",
      "description": "Optimize WebSocket message handling to maintain application responsiveness.",
      "applyTo": "src/**/*.js",
      "recommendation": "Debounce or throttle high-frequency WebSocket messages to prevent performance degradation."
    },
    {
      "name": "test-websocket-functionality",
      "description": "Write unit and integration tests for WebSocket interactions to ensure reliability.",
      "applyTo": "src/**/*.test.js",
      "recommendation": "Mock WebSocket connections in tests to simulate various scenarios and validate application behavior."
    }
  ]
}