fix: dependency array warnings

Author: wackerow

src/components/DataTable/index.tsx

@@ -97,7 +97,7 @@ const DataTable = <TData, TValue>({
     }
 
     previousExpandedRef.current = expanded
-  }, [expanded])
+  }, [expanded, matomoEventCategory, table])
 
   useEffect(() => {
     if (JSON.stringify(data) !== JSON.stringify(previousDataRef.current)) {
@@ -111,7 +111,7 @@ const DataTable = <TData, TValue>({
 
       return () => clearTimeout(timer)
     }
-  }, [data])
+  }, [data, table])
 
   return (
     <div className="relative">

src/components/ListenToPlayer/PlayerWidget/index.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { IoClose } from "react-icons/io5"
 
 import {
@@ -75,27 +75,33 @@ const PlayerWidget = ({
   const [showSpeedMenu, setShowSpeedMenu] = useState(false)
   const speedMenuRef = useRef<HTMLDivElement>(null)
 
-  const calculateNewTime = (clientX: number) => {
-    if (!scrubBarRef.current) return 0
-    const rect = scrubBarRef.current.getBoundingClientRect()
-    const position = Math.max(
-      0,
-      Math.min(1, (clientX - rect.left) / rect.width)
-    )
-    return duration * position
-  }
+  const calculateNewTime = useCallback(
+    (clientX: number) => {
+      if (!scrubBarRef.current) return 0
+      const rect = scrubBarRef.current.getBoundingClientRect()
+      const position = Math.max(
+        0,
+        Math.min(1, (clientX - rect.left) / rect.width)
+      )
+      return duration * position
+    },
+    [duration]
+  )
 
   const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
     setIsDragging(true)
     const newTime = calculateNewTime(e.clientX)
     onSeek(newTime)
   }
 
-  const handleMouseMove = (e: MouseEvent) => {
-    if (!isDragging) return
-    const newTime = calculateNewTime(e.clientX)
-    onSeek(newTime)
-  }
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (!isDragging) return
+      const newTime = calculateNewTime(e.clientX)
+      onSeek(newTime)
+    },
+    [isDragging, calculateNewTime, onSeek]
+  )
 
   const handleMouseUp = () => {
     setIsDragging(false)
@@ -110,7 +116,7 @@ const PlayerWidget = ({
       document.removeEventListener("mousemove", handleMouseMove)
       document.removeEventListener("mouseup", handleMouseUp)
     }
-  }, [isDragging])
+  }, [handleMouseMove, isDragging])
 
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {

src/components/ListenToPlayer/index.tsx

@@ -86,12 +86,14 @@ const ListenToPlayer = ({ slug }: { slug: string }) => {
       }
       audioPlayer.unload()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentTrackIndex])
 
   useEffect(() => {
     if (sound && autoplay && isPlaying) {
       sound.play()
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [sound])
 
   useEffect(() => {

src/components/ProductTable/index.tsx

@@ -94,6 +94,7 @@ const ProductTable = <T,>({
       // TODO: Fix this, removed to avoid infinite re-renders
       // router.replace(pathname, undefined, { shallow: true })
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.query])
 
   // Update or remove preset filters

src/components/Quiz/QuizWidget/useQuizWidget.tsx

@@ -64,6 +64,7 @@ export const useQuizWidget = ({
     setQuizData(quiz)
   }
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   useEffect(initialize, [quizKey])
 
   const currentQuestionIndex = userQuizProgress.length

src/components/Translatathon/CountdownBanner.tsx

@@ -1,12 +1,18 @@
-import { useEffect, useState } from "react"
+import { useEffect, useMemo, useState } from "react"
 
 import BannerNotification from "@/components/Banners/BannerNotification"
 
 export const CountdownBanner = () => {
   const [countdown, setCountdown] = useState("")
 
-  const translatathonStartDate = new Date("August 9, 2024 12:00:00 UTC")
-  const translatathonEndDate = new Date("August 18, 2024 12:00:00 UTC")
+  const translatathonStartDate = useMemo(
+    () => new Date("August 9, 2024 12:00:00 UTC"),
+    []
+  )
+  const translatathonEndDate = useMemo(
+    () => new Date("August 18, 2024 12:00:00 UTC"),
+    []
+  )
 
   const calculateCountdown = (targetDate: Date) => {
     const currentTime = new Date()
@@ -36,7 +42,7 @@ export const CountdownBanner = () => {
     return () => {
       clearInterval(interval)
     }
-  }, [])
+  }, [translatathonEndDate, translatathonStartDate])
 
   return new Date() < translatathonStartDate ? (
     <>