Describe the bug
Something about how the nextjs hot reload injects changes into the running app causes websockets to leak when updates are applied quickly.

To Reproduce

1. Create a blank app and add some stateful component to enable the websocket.
2. reflex run the app in dev mode.
3. Open http://localhost:3000 in browser.
4. Make several changes back to back saving each time.

import reflex as rx

def index() -> rx.Component:
    return rx.container(
        rx.vstack(
            rx.text(rx.State.router.page.full_path),
            rx.text(rx.State.router.session.session_id),
            rx.text(rx.State.router.session.client_token),
        ),
    )


app = rx.App()
app.add_page(index)

Expected behavior
Expect that afterwards, only a single websocket connection to /_event is open.

Actually there are many websocket connections open for the tab, but only one seems to actually be active. The others are just hanging around, wasting resources.

Thankfully this doesn't seem to affect prod mode, because there is no hot-reload in prod.

Screenshots

Why are there 3 open connections to /_event?????

Specifics (please complete the following information):

• Python Version: 3.12
• Reflex Version: 0.6.7
• OS: macOS