From 56bc51c441577f2e5446eeb7ebb52328cfb794ee Mon Sep 17 00:00:00 2001
From: Henrique Ducati <henrique.dcti@gmail.com>
Date: Tue, 14 Jul 2026 13:48:29 -0300
Subject: [PATCH] fix(ui): disconnect hot reload sockets on unmount

---
 .changeset/calm-sockets-rest.md         |  5 +++++
 packages/ui/src/hooks/use-hot-reload.ts | 21 +++++++++++----------
 2 files changed, 16 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/calm-sockets-rest.md

diff --git a/.changeset/calm-sockets-rest.md b/.changeset/calm-sockets-rest.md
new file mode 100644
index 0000000000..867c9f8843
--- /dev/null
+++ b/.changeset/calm-sockets-rest.md
@@ -0,0 +1,5 @@
+---
+'@react-email/ui': patch
+---
+
+Disconnect hot reload sockets when preview components unmount to prevent connections from accumulating across template navigation.
diff --git a/packages/ui/src/hooks/use-hot-reload.ts b/packages/ui/src/hooks/use-hot-reload.ts
index 7f9951c3b7..7efd1ce293 100644
--- a/packages/ui/src/hooks/use-hot-reload.ts
+++ b/packages/ui/src/hooks/use-hot-reload.ts
@@ -11,21 +11,22 @@ import type { HotReloadChange } from '../utils/types/hot-reload-change';
 export const useHotreload = (
   onShouldReload: (changes: HotReloadChange[]) => void,
 ) => {
-  const socketRef = useRef<Socket | null>(null);
+  const onShouldReloadRef = useRef(onShouldReload);
+  onShouldReloadRef.current = onShouldReload;
 
   useEffect(() => {
-    if (!socketRef.current) {
-      socketRef.current = io();
-    }
-    const socket = socketRef.current;
+    const socket: Socket = io();
 
-    socket.on('reload', (changes: HotReloadChange[]) => {
+    const handleReload = (changes: HotReloadChange[]) => {
       console.debug('Reloading...');
-      void onShouldReload(changes);
-    });
+      void onShouldReloadRef.current(changes);
+    };
+
+    socket.on('reload', handleReload);
 
     return () => {
-      socket.off();
+      socket.off('reload', handleReload);
+      socket.disconnect();
     };
-  }, [onShouldReload]);
+  }, []);
 };