fix: memoize inputs to fix performance issues

.changeset/angry-scissors-flow.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+fix: memoize inputs to fix text input performance

packages/app/src/DBSearchPage.tsx

@@ -1180,9 +1180,12 @@ function DBSearchPage() {
   );
   // Parse the orderBy string into a SortingState. We need the string
   // version in other places so we keep this parser separate.
-  const orderByConfig = parseAsSortingStateString.parse(
-    searchedConfig.orderBy ?? '',
-  );
+  const initialSortBy = useMemo(() => {
+    const orderBy = parseAsSortingStateString.parse(
+      searchedConfig.orderBy ?? '',
+    );
+    return orderBy ? [orderBy] : [];
+  }, [searchedConfig.orderBy]);
 
   const handleTimeRangeSelect = useCallback(
     (d1: Date, d2: Date) => {
@@ -1796,7 +1799,7 @@ function DBSearchPage() {
                           denoiseResults={denoiseResults}
                           collapseAllRows={collapseAllRows}
                           onSortingChange={onSortingChange}
-                          initialSortBy={orderByConfig ? [orderByConfig] : []}
+                          initialSortBy={initialSortBy}
                         />
                       )}
                   </>

packages/app/src/components/DBSqlRowTableWithSidebar.tsx

@@ -74,6 +74,17 @@ export default function DBSqlRowTableWithSideBar({
     setRowId(null);
     setRowSource(null);
   }, [setRowId, setRowSource]);
+  const renderRowDetails = useCallback(
+    (r: { [key: string]: unknown }) => {
+      if (!sourceData) {
+        return <div className="p-3 text-muted">Loading...</div>;
+      }
+      return (
+        <RowOverviewPanelWrapper source={sourceData} rowId={r.id as string} />
+      );
+    },
+    [sourceData],
+  );
 
   return (
     <RowSidePanelContext.Provider value={context ?? {}}>
@@ -97,17 +108,7 @@ export default function DBSqlRowTableWithSideBar({
         onSortingChange={onSortingChange}
         denoiseResults={denoiseResults}
         initialSortBy={initialSortBy}
-        renderRowDetails={r => {
-          if (!sourceData) {
-            return <div className="p-3 text-muted">Loading...</div>;
-          }
-          return (
-            <RowOverviewPanelWrapper
-              source={sourceData}
-              rowId={r.id as string}
-            />
-          );
-        }}
+        renderRowDetails={renderRowDetails}
         onScroll={onScroll}
         onError={onError}
         onExpandedRowsChange={onExpandedRowsChange}