From 6ae8e20dcaad26249250804988e98353051e06ae Mon Sep 17 00:00:00 2001
From: mariodev <gh_mario.proclaim@slmail.me>
Date: Fri, 2 Aug 2024 13:22:30 -0400
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20Fixed=20infinite=20resfreshing?=
 =?UTF-8?q?=20on=20server=20for=20thumbnails?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

We memoize the thumbnails for current page videos
---
 .../app/components/misc/VideoCard/VideoCardWithMenu.tsx    | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/app/components/misc/VideoCard/VideoCardWithMenu.tsx b/packages/app/components/misc/VideoCard/VideoCardWithMenu.tsx
index a9e199196..19a5da2f2 100644
--- a/packages/app/components/misc/VideoCard/VideoCardWithMenu.tsx
+++ b/packages/app/components/misc/VideoCard/VideoCardWithMenu.tsx
@@ -16,7 +16,7 @@ import { IExtendedSession } from '@/lib/types'
 import { formatDate } from '@/lib/utils/time'
 import { EllipsisVertical } from 'lucide-react'
 import Link from 'next/link'
-import React, { ReactNode } from 'react'
+import React, { ReactNode, useMemo } from 'react'
 import { useEffect, useState } from 'react'
 
 const VideoCardWithMenu = ({
@@ -34,6 +34,8 @@ const VideoCardWithMenu = ({
     undefined
   )
 
+  const memoizedSession = useMemo(() => session, [])
+
   useEffect(() => {
     const getThumbnail = async (session: IExtendedSession) => {
       try {
@@ -48,7 +50,8 @@ const VideoCardWithMenu = ({
     if (session) {
       getThumbnail(session)
     }
-  }, [session])
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [memoizedSession])
 
   return (
     <div className="flex min-h-full w-full flex-col rounded-xl uppercase">