fix(ui): disconnect hot reload sockets on unmount

[hducati]

The previous implementation mixed two lifecycle concerns:

-> callback changes during a re-render: socket should remain connected and use the latest callback
-> component unmounts: socket should be closed

The original socket.off() likely avoided reconnecting whenever an inline callback changed. However, after a real unmount, the socketRef is discarded, so that connection can never be reused.

I ran a runtime measurement on my end, and it confirmed the leak:

Before: 3 → 5 → 7 → 9 → 11 active sockets
After: 3 → 3 → 3 → 3 → 3 active sockets

The additional sockets belonging to unmounted components have no purpose at all

---

Summary by cubic

Fixes a hot reload socket leak by disconnecting the socket when preview components unmount. Keeps the latest reload callback without reconnecting on re-renders.

• Bug Fixes
  • Create a socket on mount; on unmount remove the reload listener and call disconnect().
  • Use a ref so onShouldReload stays up to date without re-subscribing.
  • Adds a patch changeset for @react-email/ui.

^{Written for commit 07ebc5c. Summary will update on new commits.}

[vercel]

@hducati is attempting to deploy a commit to the resend Team on Vercel.

A member of the Team first needs to authorize it.

[changeset-bot]

🦋 Changeset detected

Latest commit: 07ebc5c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@react-email/ui	Patch
react-email	Patch
@react-email/editor	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[gabrielmfern]

this is very nice, thank you!

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@react-email/ui@3658

commit: 07ebc5c