From 6c2c0a1c4d0008670440654051bf01bbe0e19822 Mon Sep 17 00:00:00 2001
From: kmichel <kmichel1030@gmail.com>
Date: Wed, 17 Apr 2024 17:51:23 -0700
Subject: [PATCH] add comment

---
 src/components/VideoPlayer/BaseVideoPlayer.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/VideoPlayer/BaseVideoPlayer.tsx b/src/components/VideoPlayer/BaseVideoPlayer.tsx
index 80f0fd596ed6..0480ee4314e9 100644
--- a/src/components/VideoPlayer/BaseVideoPlayer.tsx
+++ b/src/components/VideoPlayer/BaseVideoPlayer.tsx
@@ -172,6 +172,8 @@ function BaseVideoPlayer({
         });
     }, [currentVideoPlayerRef, handleFullscreenUpdate, handlePlaybackStatusUpdate]);
 
+    // use `useLayoutEffect` instead of `useEffect` because ref is null when unmount in `useEffect` hook
+    // ref url: https://reactjs.org/blog/2020/08/10/react-v17-rc.html#effect-cleanup-timing
     useLayoutEffect(() => 
         () => {
             if(shouldUseSharedVideoElement || videoPlayerRef.current !== currentVideoPlayerRef.current) {
@@ -212,7 +214,7 @@ function BaseVideoPlayer({
             }
             return;
         }
-
+        
         videoPlayerRef.current = currentVideoPlayerRef.current;
         if (currentlyPlayingURL === url && newParentRef && 'appendChild' in newParentRef) {
             newParentRef.appendChild(sharedElement as HTMLDivElement);