add use callback once

happy-software · Sep 1, 2023 · d498d67 · d498d67
1 parent e46b4dd
commit d498d67
Showing 1 changed file with 13 additions and 1 deletion.
diff --git a/src/pages/ShufflePlayer.js b/src/pages/ShufflePlayer.js
@@ -23,12 +23,24 @@ function ShufflePlayer() {
   const [hideDescription,     setHideDescription]     = useState(true)
 
   const [videosResult, fetchPlaylistVideos] = useVideoHook(selectedPlaylistIds) 
-  useEffect(loadPlaylists, [])
   useEffect(pickNextVideo, [videosResult])
   useEffect(() => {
     localStorage.setItem("selectedPlaylistIds", JSON.stringify(selectedPlaylistIds));
   }, [selectedPlaylistIds]);
 
+  useCallbackOnce(loadPlaylists)
+
+  function useCallbackOnce(callbackFunction, condition = true) {
+    const isCalledRef = React.useRef(false);
+
+    React.useEffect(() => {
+      if (condition && !isCalledRef.current) {
+        isCalledRef.current = true;
+        callbackFunction();
+      }
+    }, [callbackFunction, condition]);
+  }
+
   function loadPlaylists() {
     axios.get(AppConstants.APIEndpoints.TRACKED_PLAYLISTS)
       .then(response => {