fix : Issue#754

Author: Tiru-99

apps/web/components/ContentSearch.tsx

@@ -1,5 +1,5 @@
 "use client";
-import { useEffect, useRef, useState, useDeferredValue } from "react";
+import { useEffect, useRef, useState, useDeferredValue, useMemo } from "react";
 import Link from "next/link";
 import { Cross2Icon, MagnifyingGlassIcon } from "@radix-ui/react-icons";
 import { Dialog, DialogClose, DialogContent, Input, Card, CardDescription, CardHeader, CardTitle } from "@repo/ui";
@@ -45,11 +45,15 @@ export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
     });
     setAllTracks(updatedTracks);
   }, []);
-  useEffect(() => {
-    const fuse = new Fuse(allTracks, {
+  
+  // Memoize to avoid unnecessary re-computation
+  const fuse = useMemo(() => {
+    return new Fuse(allTracks, {
       keys: ["payload.problemTitle"],
     });
+  }, [allTracks]);
 
+  useEffect(() => {
     async function fetchSearchResults() {
       if (deferredInput.length > 0) {
         /* const data = await getSearchResults(deferredInput); */
@@ -61,7 +65,7 @@ export function ContentSearch({ tracks }: { tracks: TrackPros[] }) {
       }
     }
     fetchSearchResults();
-  }, [deferredInput]);
+  }, [deferredInput , fuse]);
 
   useEffect(() => {
     const handleKeyPress = (event: KeyboardEvent) => {