From 613a24570f7081642250070b7d09c8ce7d385c6c Mon Sep 17 00:00:00 2001
From: trinity-1686a <trinity@quickwit.io>
Date: Sun, 12 May 2024 00:05:42 +0200
Subject: [PATCH] try to make typing experience better

---
 .../components/SearchResult/SearchResult.tsx  | 28 ++++++++++++-------
 quickwit/quickwit-ui/src/views/SearchView.tsx |  1 -
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx b/quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx
index bc73fb81112..0a6f406ec1f 100644
--- a/quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx
+++ b/quickwit/quickwit-ui/src/components/SearchResult/SearchResult.tsx
@@ -17,6 +17,7 @@
 // You should have received a copy of the GNU Affero General Public License
 // along with this program. If not, see <http://www.gnu.org/licenses/>.
 
+import { useMemo } from 'react';
 import { Box, Typography } from "@mui/material";
 import NumberFormat from "react-number-format";
 import { Index, ResponseError, SearchResponse } from "../../utils/models";
@@ -64,16 +65,23 @@ export default function SearchResult(props: SearchResultProps) {
   if (props.searchResponse == null || props.index == null) {
     return <></>
   }
-  let result;
-  console.log(props.searchResponse);
-  if (props.searchResponse.aggregations === undefined) {
-    console.log("result table");
-    result = (<ResultTable searchResponse={props.searchResponse} index={props.index} />);
-  } else {
-    console.log("aggregation result");
-    result = (<AggregationResult searchResponse={props.searchResponse} />);
-  }
-  (<ResultTable searchResponse={props.searchResponse} index={props.index} />);
+  // try to improve typing experience by caching the costly-to-render components
+  // in practice this doesn't seem to have much impact
+  const result = useMemo(
+    () => {
+      if (props.searchResponse == null || props.index == null) {
+	return null;
+      } else if (props.searchResponse.aggregations === undefined) {
+        console.log("result table");
+        return (<ResultTable searchResponse={props.searchResponse} index={props.index} />);
+      } else {
+        console.log("aggregation result");
+        return (<AggregationResult searchResponse={props.searchResponse} />);
+      }
+    },
+    [props.searchResponse, props.index]
+  );
+
   return (
     <Box sx={{ pt: 1, flexGrow: '1', flexBasis: '0%', overflow: 'hidden'}} >
       <Box sx={{ height: '100%', flexDirection: 'column', flexGrow: 1, display: 'flex'}}>
diff --git a/quickwit/quickwit-ui/src/views/SearchView.tsx b/quickwit/quickwit-ui/src/views/SearchView.tsx
index 72e35534f5c..840d2801a3d 100644
--- a/quickwit/quickwit-ui/src/views/SearchView.tsx
+++ b/quickwit/quickwit-ui/src/views/SearchView.tsx
@@ -89,7 +89,6 @@ function SearchView() {
     });
   }
   const onSearchRequestUpdate = (searchRequest: SearchRequest) => {
-    console.log("on search request update:", searchRequest);
     setSearchRequest(searchRequest);
   }
   useEffect(() => {