State Update Causes Re-Render

[Joshua Welford]

Describe the bug
When using the React state, any changes to the state (even if it's irrelevant to the player) cause the player to re-render.

Expected behavior
Change to state not relevant to the player should not cause a re-render.

<div className={`aspect-w-16 aspect-h-9 mt-8 ${PlyrStyle}`}>
    <Plyr autoPlay={true} source={{type: 'video', sources: [
        {
            src: this.state.videoId,
            provider: 'youtube',
        },
    ]}}></Plyr>
</div>

Calling this.setState({ something: 'else' }) will re-render the player.

[Vinay Valiyaparambil]

Faced the same issue. It's weird. My solution was to create a custom wrapper for and adding React.memo to it. That'll fix it.

[Amir.H Ebrahimi]

Set state will cause your component to re-render, by default we use source and options as a dependency-array for Plyr inner re-render check.
see details in dependency-array fallback here

To solve this, memoize your source and options or if they are static hoist them to the top of your program.

In case you need more control e.g. your custom deps-array [JSON.stringify([source, options])]
You can use usePlyr hook

[andyg5000]

I'm experiencing a related issue. I've memo-ized my source and options properties which prevents the re-render in production.

However, in react strict mode (during development) I'm getting a re-render that's breaking the plyr component. We're currently using usePlyr, but the reloading is causing a partially registered plyr element or something weird.

Any ideas on dealing with that?

[Amir.H Ebrahimi]

Hey @andyg5000, could you reproduce the issue in the code-sandbox,

The react strict mode causes the use effects to be called twice and it is not controlled by us.
facebook/react#24502

[andyg5000]

Hey @realamirhe

Thanks for following up. Here's a sample of what I'm seeing with usePlyr

https://codesandbox.io/s/hidden-shadow-ep3dnk?file=/src/App.js

When you open the link, it may or may not load the video. If you save the app file without making any changes you'll see sometimes the video renders fine.

Our main issue is that several things are causing the video component to get re-rendered occasionally (session hydration). When this happens things get doubled up (attached events).