✨ unsubscribe from channel on effect cleanup

src/__tests__/useChannel.tsx

@@ -20,7 +20,7 @@ describe("useChannel()", () => {
       <__PusherContext.Provider value={{ client: undefined }} {...props} />
     );
     const { result } = renderHook(() => useChannel("public-channel"), {
-      wrapper
+      wrapper,
     });
 
     expect(result.current).toBeUndefined();
@@ -32,4 +32,23 @@ describe("useChannel()", () => {
     );
     expect(result.current).toBeInstanceOf(PusherChannelMock);
   });
+
+  test("should unsubscribe on unmount", async () => {
+    const mockUnsubscribe = jest.fn();
+    const client = {
+      subscribe: jest.fn(),
+      unsubscribe: mockUnsubscribe,
+    };
+    const wrapper = ({ children }) => (
+      <__PusherContext.Provider value={{ client: client as any }}>
+        {children}
+      </__PusherContext.Provider>
+    );
+    const { unmount } = await renderHook(() => useChannel("public-channel"), {
+      wrapper,
+    });
+    unmount();
+
+    expect(mockUnsubscribe).toHaveBeenCalled();
+  });
 });

src/testUtils.tsx

@@ -1,4 +1,5 @@
-import { act, renderHook } from "@testing-library/react-hooks";
+import { renderHook } from "@testing-library/react-hooks";
+import { act } from "react-dom/test-utils";
 
 import Pusher from "pusher-js";
 import { PusherMock } from "pusher-js-mock";

src/useChannel.ts

@@ -26,11 +26,18 @@ export function useChannel<T extends Channel & PresenceChannel>(
   const { client } = usePusher();
   const [channel, setChannel] = useState<T | undefined>();
   useEffect(() => {
+    /** Return early if there's no client */
     if (!client) return;
-    const pusherChannel = client?.subscribe(channelName);
 
+    /** Subscribe to channel and set it in state */
+    const pusherChannel = client?.subscribe(channelName);
     setChannel(pusherChannel as T);
+
+    /** Cleanup on unmount/re-render */
+    return () => client?.unsubscribe(channelName);
   }, [channelName, client]);
+
+  /** Return the channel for use. */
   return channel;
 }