I get indicates a memory leak in my application warning when implement React-netflix-player.

[huy232]

Hello, I have this warning only whenever I try to implement

<ReactNetflixPlayer src={myMp4FileState}/>

into my component, if I disable the React-netflix-player and switch to a standard HTML tag like:

<video controls>
<source src = {myMp4FileState} />
</video>

the warning will disappear and everything is fine again, no more warning fire out, I've tested it a few times by disabling and enabling the React-netflix-player, so I think it's from the React-netflix-player, hope you can have a look, thanks.

For more specific, it's said:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
    at c.default

[Lucasmg37]

Hey @huy232
Yesterday I published a new version of react-netflix-player.

May you try with this new version 1.1.5?

If the problem persist, send me your react version please.

[vtrphan]

problem still persists with newest react version (v17). Possible solution is to do some cleanup in the useEffect hooks (for example reset all the states to default values)

[huy232]

Hello @Lucasmg37 , I'm really sorry for my really really late reply, I've been busy and didn't see the notification up until now.

So after a year, I returned to this player because I like it and want to know whether I still have this problem or not. But turn out I still have this problem.

My React version is "react": "^17.0.2"

To reproduce the situation:
First I have component A, which contains the information about the series, or movie (like their name, how many episodes they have, etc.), in there, whenever I click on a specific episode, it'll navigate or <Link/> me to component B.
So the current route of component A will be:
localhost:3000/info/a-random-series

Component B is where the ReactNetflixPlayer is. In there I receive some params, for example:
localhost:3000/watch/a-random-series?episode=3

I'm using the backButton function of ReactNetflixPlayer so that the user can return to the information page when they don't want to watch the series anymore.
I do it like this:
backButton={() => navigate('/info/${a-random-series}')}
Furthermore, when I use the reprodutionList to change to another episode, the warning still persists.

So when I go back to the information page or change the episode, it immediately fires a warning that I'm having a memory leak. Besides, after watching an episode for some period of time, let's say about 3-5 minutes, another warning that said there were Over 200 classes were generated for component styled.div thing (this is a yellow warning, not a red error warning). From that point, the video player started to be very laggy and function very slowly.

I used some other players for my project and it still works fine, but when I switch to this, I have those problems, up until now.

Hope you can read this.

[iatomic1]

Have you found an alternative to this ?