diff --git a/apps/web/components/ContentSearch.tsx b/apps/web/components/ContentSearch.tsx index b8f8261d..e72f345d 100644 --- a/apps/web/components/ContentSearch.tsx +++ b/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) => { diff --git a/yarn.lock b/yarn.lock deleted file mode 100644 index e69de29b..00000000