Dealing with vjs in a Next.js app with reactStrictMode

[stephenlindauer]

For context, Next.js has a "feature" where when reactStrictMode is enabled (which it is by default), it will run useEffect hooks twice.

React's Strict Mode is a development mode only feature for highlighting potential problems in an application. It helps to identify unsafe lifecycles, legacy API usage, and a number of other features.

Strict Mode enables the following development-only behaviors:

• Your components will re-render an extra time to find bugs caused by impure rendering.

Because of this, my useEffect cleanup function is destroying the player as soon as the page loads (on the second render). I've verified the player is setup and working great if I disable strict mode, but the rest of the dev team has it enabled, so I'd like to be able to fix this properly. What's the proper way to re-create the player after it gets destroyed, or how are other people in Next.js handling cleanup?

Code sample:

const videoRef = useRef<HTMLVideoElement>(null);
const playerRef = useRef<Player>();

useEffect(() => {
  if (videoRef.current == null) return;

  if (!playerRef.current) {
    console.log("Initialize player");
    playerRef.current = videojs(videoRef.current, options);
  }

  return () => {
    if (playerRef.current) {
      console.log("Dispose player");
      playerRef.current.dispose();
      playerRef.current = undefined;
    }
  };
}, [source, videoRef, options]);

return (
  <>
    <video ref={videoRef} poster={poster} className="video-js" />
  </>
);

When this runs, the console shows:

Initialize player
Dispose player
Initialize player

But the player doesn't show up (just empty space), so I'm guessing I'm creating the player wrong, or need to do something different for re-creating it.

Any help is greatly appreciated!