Browser memory leak due to unclosed threads from live stream routes

[mohamadlotfy]

Issue Description:

Upon navigating to routes containing live stream videos, the browser initiates new threads. However, when exiting these routes, the associated threads remain open, leading to thread accumulation and memory leakage.

To Reproduce:

Utilize Google Chrome or Mozilla Firefox browsers.

• Execute the project without a backend server by enabling the USE_MOCK_DATA option.
• Initiate the project using react-scripts --openssl-legacy-provider start to prevent the occurrence of the digital-envelope-routine-unsupported error.
• Open the browser developer tools.
• Navigate to and depart from various live stream pages accessible via the cards on the home page.
• [Via Chrome developer tools] Observe thread accumulation within the browser. This can be monitored through the Memory tab in the developer tools, under the running JavaScript VM instances. Additionally, this accumulation is visible in the sources tab, under the threads section, as depicted in the provided images.

![Uploading Screenshot 2024-04-17 at 12.55.42 AM.png…]()

Environment Details:

Browser: Google Chrome Version 123.0.6312.124 (Official Build) (arm64)
Operating System: MacOS Sonoma V14.4.1 Apple (Apple Silicon chip)