Fix invalid syntax and missing cleanup in `useWebSocket` hook

[sourcery-ai]

Summary

The newly added useWebSocket hook contains syntactically invalid code and does not properly clean up WebSocket connections. This will prevent the file from compiling and may lead to resource leaks at runtime.

Details

In the current implementation of useWebSocket, the hook includes an onUnmount: () => snippet that is syntactically incomplete/invalid. As written, this will cause a compilation error.

Additionally, the hook does not appear to close or unsubscribe the WebSocket connection when the component using the hook unmounts. This can cause open connections to persist longer than they should, potentially leading to:

• Memory leaks
• Unnecessary open WebSocket connections
• Unexpected behavior when remounting components that reuse the hook

The hook also imports or references useGeneralSettings but does not include it in the useEffect dependency array, nor is it clearly used to configure the WebSocket connection. This is either dead code or a missing dependency in the effect.

Impact

• The current syntax (onUnmount: () =>) will stop the file from compiling.
• Lack of cleanup can cause dangling WebSocket connections.
• Unused or incorrectly handled dependencies (useGeneralSettings) can make the hook behavior brittle or misleading.

Suggested Fix

1. Fix the invalid syntax

   • Remove onUnmount: () => entirely, or
   • Implement a proper cleanup mechanism using the useEffect cleanup function:

     useEffect(() => {
       const ws = new WebSocket(url);
       
       // setup handlers here
       
       return () => {
         // Clean up WebSocket on unmount
         ws.close();
       };
     }, [/* dependencies */]);

2. Implement WebSocket cleanup

   • Ensure the useEffect returned cleanup function closes the WebSocket and removes any event listeners.
   • If multiple listeners are attached (e.g., ws.onmessage, ws.onerror), ensure they are cleared or the connection is closed.

3. Handle useGeneralSettings correctly

   • If useGeneralSettings is used to determine the WebSocket configuration (URL, protocols, auth, etc.), include its values in the useEffect dependency array so that the connection is updated when settings change.
   • If useGeneralSettings is not needed, remove the import and any references to reduce dead code.

Action Items

• Locate the useWebSocket hook file and fix the onUnmount: () => syntax.
• Add a proper cleanup function to the main useEffect that closes the WebSocket on component unmount.
• Review and adjust the useEffect dependency array to correctly include any configuration derived from useGeneralSettings.
• Remove any unused imports or variables related to useGeneralSettings if they are not required.
• Add tests or usage examples to verify that:
  • The file compiles successfully.
  • WebSocket connections are closed when components unmount.
  • Changes in general settings correctly reconfigure the WebSocket connection (if applicable).

---

I created this issue for @Its4Nik from #132 (comment).

Tips and commands

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.