fix: improve item rendering to use more unique key

+ debounce search in static list

src/components/item/ItemCard.tsx

@@ -19,9 +19,9 @@ import { AiFillCheckCircle, AiFillCloseCircle } from "react-icons/ai";
 import { FiExternalLink } from "react-icons/fi";
 import { ImCopy } from "react-icons/im";
 
-import { ListItem } from "components/models/list";
+import { APIEntry } from "services/publicapis/list/types";
 
-type APIDetailsProps = Omit<ListItem, "API" | "Description" | "Link">;
+type APIDetailsProps = Omit<APIEntry, "API" | "Description" | "Link">;
 
 const APIDetails = ({ Category, HTTPS, Cors, Auth }: APIDetailsProps) => {
   return (
@@ -49,7 +49,7 @@ const APIDetails = ({ Category, HTTPS, Cors, Auth }: APIDetailsProps) => {
 };
 
 type ItemCardProps = {
-  value: ListItem;
+  value: APIEntry;
   useAccordion?: boolean;
 };
 

src/components/item/ItemContainer.tsx

@@ -1,11 +1,11 @@
 import { Grid } from "@chakra-ui/react";
 
-import { ListItem } from "components/models/list";
+import { APIEntry } from "services/publicapis/list/types";
 
 import ItemCard from "./ItemCard";
 
 type ItemContainerProps = {
-  entries: Array<ListItem>;
+  entries: Array<APIEntry>;
   useAccordion?: boolean;
 };
 
@@ -22,7 +22,11 @@ const ItemContainer = ({ entries, useAccordion }: ItemContainerProps) => {
       gap={8}
     >
       {entries.map((entry) => (
-        <ItemCard value={entry} key={entry.API} useAccordion={useAccordion} />
+        <ItemCard
+          value={entry}
+          key={`${entry.API}-${entry.Link}`}
+          useAccordion={useAccordion}
+        />
       ))}
     </Grid>
   );

src/components/pages/all/index.tsx

@@ -1,5 +1,6 @@
 import { Box, Button, FormControl, Input, Skeleton } from "@chakra-ui/react";
 import chunk from "lodash/chunk";
+import debounce from "lodash/debounce";
 import Link from "next/link";
 import { ChangeEvent, useCallback, useMemo, useState } from "react";
 import { AiOutlineArrowLeft } from "react-icons/ai";
@@ -61,11 +62,15 @@ const APIListPage = ({ fallbackData }: APIListPageProps) => {
     [currentPage]
   );
 
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   const handleChangeKeyword = useCallback(
-    (event: ChangeEvent<HTMLInputElement>) => {
+    debounce((event: ChangeEvent<HTMLInputElement>) => {
       setKeyword(event.target.value.toLowerCase());
-    },
-    []
+      if (currentPage !== 0) {
+        setCurrentPage(0);
+      }
+    }, 200),
+    [currentPage]
   );
 
   const pageNavigationButtonsProps: PageNavigationButtonsProps = useMemo(