Bug: Event Listener Memory Leak in useMediaRecorder Hook

[deepak0x]

The useMediaRecorder and useNewMediaRecorder hooks attach event listeners to MediaRecorder instances using addEventListener, but never remove them. When recording is started multiple times, new MediaRecorder instances are created while old listeners remain attached to abandoned instances.

This leads to memory leaks and increasing memory usage over time.

---

Observed Behavior

Both hooks register event listeners on MediaRecorder objects using addEventListener:

• dataavailable
• stop

These listeners are added every time recording starts. However, they are never removed when recording stops or when a new recorder instance is created.

As a result, listeners accumulate across multiple recording sessions.

---

Why This Is Incorrect

Event listeners must be explicitly removed when an object is no longer needed. In this case:

• MediaRecorder instances are recreated on each recording session
• Old recorder instances are abandoned
• Event listeners remain attached to those instances

This prevents garbage collection and causes memory leaks.

---

Steps to Reproduce

1. Use the audio or video recording feature in EmbeddedChat.
2. Start recording.
3. Stop recording.
4. Start recording again (a new MediaRecorder instance is created).
5. Repeat steps 2–4 multiple times.
6. Observe browser memory usage using developer tools.

Memory usage increases steadily due to unreleased MediaRecorder instances.