fix: replace useEffect with useMemo

src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx

@@ -1,29 +1,19 @@
 "use client";
 
-import { useDebounce } from "@uidotdev/usehooks";
-import { useSearchParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { FiSearch } from "react-icons/fi";
 
 interface FinalityProviderSearchProps {
+  searchValue: string;
   onSearch: (searchTerm: string) => void;
 }
 
 export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
+  searchValue,
   onSearch,
 }) => {
-  const searchParams = useSearchParams();
-  const initialSearchTerm = searchParams.get("fp") || "";
-
-  const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
-  const debouncedSearchTerm = useDebounce(searchTerm, 300);
-
-  useEffect(() => {
-    onSearch(debouncedSearchTerm);
-  }, [debouncedSearchTerm, onSearch]);
-
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(e.target.value);
+    onSearch(e.target.value);
   };
 
   return (
@@ -32,10 +22,11 @@ export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
         <div className="absolute inset-y-0 left-0 flex items-center justify-center w-10">
           <FiSearch className="text-sm md:text-lg" />
         </div>
+
         <input
           type="text"
           placeholder="Search by Name or Public Key"
-          value={searchTerm}
+          value={searchValue}
           onChange={handleSearch}
           className="w-full pl-10 pr-4 py-2 text-sm bg-transparent border-b border-gray-300 focus:outline-none focus:border-primary"
         />

src/app/components/Staking/FinalityProviders/FinalityProviders.tsx

@@ -92,9 +92,8 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
     handleError,
   ]);
 
-  const { handleSearch, filteredProviders } = useFinalityProvidersData(
-    fps?.finalityProviders,
-  );
+  const { searchValue, handleSearch, filteredProviders } =
+    useFinalityProvidersData(fps?.finalityProviders);
 
   if (!fps?.finalityProviders?.length) {
     return <LoadingView />;
@@ -106,7 +105,10 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
         <strong>Step-1:</strong> Select a finality provider
       </p>
       <div className="flex gap-3">
-        <FinalityProviderSearch onSearch={handleSearch} />
+        <FinalityProviderSearch
+          searchValue={searchValue}
+          onSearch={handleSearch}
+        />
       </div>
       <div className="hidden gap-2 px-4 lg:grid lg:grid-cols-stakingFinalityProvidersDesktop">
         <p>Finality Provider</p>

src/app/hooks/finalityProviders/useFinalityProvidersData.ts

@@ -1,48 +1,40 @@
 "use client";
 
+import { useDebounce } from "@uidotdev/usehooks";
 import { useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import { FinalityProvider as FinalityProviderInterface } from "@/app/types/finalityProviders";
 
 export const useFinalityProvidersData = (
   initialProviders: FinalityProviderInterface[] | undefined,
 ) => {
-  const [filteredProviders, setFilteredProviders] = useState(initialProviders);
   const searchParams = useSearchParams();
+  const [searchTerm, setSearchTerm] = useState(searchParams.get("fp") || "");
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
-  // Initialize with search param if it exists
-  useEffect(() => {
-    const fpParam = searchParams.get("fp");
-
-    if (fpParam) {
-      handleSearch(fpParam);
-    } else {
-      setFilteredProviders(initialProviders);
-    }
-  }, [initialProviders]); // Only run on initial load and when providers change
-
-  const handleSearch = useCallback(
-    (searchTerm: string) => {
-      const filtered = initialProviders?.filter((fp) => {
+  const filteredProviders = useMemo(
+    () =>
+      initialProviders?.filter((fp) => {
         const matchesMoniker = fp.description?.moniker
           ?.toLowerCase()
-          .includes(searchTerm.toLowerCase());
+          .includes(debouncedSearchTerm.toLowerCase());
         const matchesPk = fp.btcPk
           .toLowerCase()
-          .includes(searchTerm.toLowerCase());
+          .includes(debouncedSearchTerm.toLowerCase());
 
         return matchesMoniker || matchesPk;
-      });
-
-      setFilteredProviders(filtered);
-    },
-    [initialProviders],
+      }),
+    [initialProviders, debouncedSearchTerm],
   );
 
+  const handleSearch = useCallback((searchValue: string) => {
+    setSearchTerm(searchValue);
+  }, []);
+
   return {
     filteredProviders,
-    setFilteredProviders,
     handleSearch,
+    searchValue: searchTerm,
   };
 };