Hooks / React.useState cause flicker issue when used in onProgress

Current Behavior

v2 - Using hooks along with state within onProgress callback creates a re-render loop. Player flickers endlessly.

Expected Behavior

Setting a separate piece of state that the player is not dependent on should not re render ReactPlayer

Steps to Reproduce

1. Create a functional component to use ReactPlayer in
2. Add a piece of state using hooks pattern ex. const [played, setPlayed] = React.useState(false);
3. Create a handler function that updates state base on object passed ex.

const handleProgress = (playedObject) => {
    if (!seeking) {
      setPlayed(playedObject.played);
    }
  };

1. Use handler inside onProgress method on ReactPlayer ex. onProgress={handleProgress}

Example provided: Uncomment setPlayed inside handleProgress to see issue https://codesandbox.io/s/strange-sun-cw9oq?file=/src/App.js:301-311

Environment

• URL attempting to play: any (example uses https://res.cloudinary.com/filmsupply/video/upload/ac_none,vc_auto/v1606326468/static/Home/home-hero.mp4)
• Browser: Chrome
• Operating system: macOS Big Sur
• Codesanbox example: https://codesandbox.io/s/strange-sun-cw9oq?file=/src/App.js:301-311

Other Information

If we convert this to a class component or revert to v1 the issue is not present. Also state must be set to the passed value on the progress handler (using a static value to set state does not cause flicker)

[wouter-deen]

For me, it ended up being cleaner to just have a one return statement with some conditional rendering inside. That also solved the problem of it flickering because it was inside a nested function’s return statement. I’m using react-player to play video files stored in a GCP storage bucket currently. I’m using the useState React hook for states like playing, started, progress etc.

[cookpete]

@ferrero1987 Do you have a reproducible example of this happening? Does anyone?