Merge pull request #1536 from bluewave-labs/fix/fe/debounce-search

fix: fix unnecessary rerenders

Client/src/Components/Inputs/Search/index.jsx

@@ -132,6 +132,7 @@ const Search = ({
 				}
 				return filtered;
 			}}
+			getOptionKey={(option) => option.id}
 			renderOption={(props, option) => {
 				const { key, ...optionProps } = props;
 				return (

Client/src/Pages/Uptime/Home/UptimeDataTable/index.jsx

@@ -13,10 +13,47 @@ import ActionsMenu from "../actionsMenu";
 // Utils
 import { useTheme } from "@emotion/react";
 import useUtils from "../../utils";
-import { memo } from "react";
+import { useState, memo, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import "../index.css";
 import PropTypes from "prop-types";
+import { useTraceUpdate } from "../../../../Hooks/useTraceUpdate";
+
+const SearchComponent = memo(
+	({ monitors, debouncedSearch, onSearchChange, setIsSearching }) => {
+		const [localSearch, setLocalSearch] = useState(debouncedSearch);
+		const handleSearch = useCallback(
+			(value) => {
+				setIsSearching(true);
+				setLocalSearch(value);
+				onSearchChange(value);
+			},
+			[onSearchChange, setIsSearching]
+		);
+
+		return (
+			<Box
+				width="25%"
+				minWidth={150}
+				ml="auto"
+			>
+				<Search
+					options={monitors}
+					filteredBy="name"
+					inputValue={localSearch}
+					handleInputChange={handleSearch}
+				/>
+			</Box>
+		);
+	}
+);
+SearchComponent.displayName = "SearchComponent";
+SearchComponent.propTypes = {
+	monitors: PropTypes.array,
+	debouncedSearch: PropTypes.string,
+	onSearchChange: PropTypes.func,
+	setIsSearching: PropTypes.func,
+};
 
 /**
  * UptimeDataTable displays a table of uptime monitors with sorting, searching, and action capabilities
@@ -55,7 +92,7 @@ const UptimeDataTable = ({
 	monitorCount,
 	sort,
 	setSort,
-	search,
+	debouncedSearch,
 	setSearch,
 	isSearching,
 	setIsSearching,
@@ -67,11 +104,6 @@ const UptimeDataTable = ({
 	const theme = useTheme();
 	const navigate = useNavigate();
 
-	const handleSearch = (value) => {
-		setIsSearching(true);
-		setSearch(value);
-	};
-
 	const handleSort = (field) => {
 		let order = "";
 		if (sort.field !== field) {
@@ -202,18 +234,13 @@ const UptimeDataTable = ({
 				>
 					{monitorCount}
 				</Box>
-				<Box
-					width="25%"
-					minWidth={150}
-					ml="auto"
-				>
-					<Search
-						options={monitors}
-						filteredBy="name"
-						inputValue={search}
-						handleInputChange={handleSearch}
-					/>
-				</Box>
+
+				<SearchComponent
+					monitors={monitors}
+					debouncedSearch={debouncedSearch}
+					onSearchChange={setSearch}
+					setIsSearching={setIsSearching}
+				/>
 			</Stack>
 			<Box position="relative">
 				{(isSearching || isLoading) && (
@@ -280,7 +307,7 @@ UptimeDataTable.propTypes = {
 		order: PropTypes.oneOf(["asc", "desc"]),
 	}),
 	setSort: PropTypes.func,
-	search: PropTypes.string,
+	debouncedSearch: PropTypes.string,
 	setSearch: PropTypes.func,
 	isSearching: PropTypes.bool,
 	setIsSearching: PropTypes.func,

Client/src/Pages/Uptime/Home/index.jsx

@@ -134,9 +134,9 @@ const UptimeMonitors = () => {
 		setPage(0);
 	};
 
-	const triggerUpdate = () => {
+	const triggerUpdate = useCallback(() => {
 		setMonitorUpdateTrigger((prev) => !prev);
-	};
+	}, []);
 	const totalMonitors = monitorsSummary?.totalMonitors ?? 0;
 	const hasMonitors = monitorsSummary?.totalMonitors ?? 0;
 	const canAddMonitor = isAdmin && hasMonitors;
@@ -203,7 +203,7 @@ const UptimeMonitors = () => {
 									monitorCount={totalMonitors}
 									sort={sort}
 									setSort={setSort}
-									search={search}
+									debouncedSearch={debouncedFilter}
 									setSearch={setSearch}
 									isSearching={isSearching}
 									setIsSearching={setIsSearching}