perf(data-grid): optimize rerenders (#1104)

* perf: optimize data-grid following Vercel React best practices

- Add optimizePackageImports for lucide-react tree-shaking
- Use functional setState in MultiSelectCell for stable callbacks
- Add searchMatchSet for O(1) search lookups instead of O(n) .some()
- Extract serializeCellsToTsv helper to combine iterations and DRY copy/cut
- Add content-visibility CSS to virtualized rows

Co-authored-by: Cursor <cursoragent@cursor.com>

* perf: convert constant lookup arrays to Sets for O(1) checks

- NON_NAVIGABLE_COLUMN_IDS in use-data-grid.ts
- REMOVE_FILTER_SHORTCUTS, OPERATORS_WITHOUT_VALUE in data-grid-filter-menu.tsx
- REMOVE_SORT_SHORTCUTS in data-grid-sort-menu.tsx
- Add seenColumnIds Set for O(1) deduplication in serializeCellsToTsv

Co-authored-by: Cursor <cursoragent@cursor.com>

* perf: optimize column lookups and extract shared helper

- Add getEmptyValueForVariant helper to DRY empty value logic
- Build columnById Map for O(1) lookups in paste/delete handlers
- Build cellById Map for O(1) lookups in search function
- Convert tableColumns.find() and getVisibleCells().find() to Map.get()

Co-authored-by: Cursor <cursoragent@cursor.com>

* refactor: move getEmptyCellValue to lib and remove redundant comments

- Rename getEmptyValueForVariant to getEmptyCellValue
- Move helper to src/lib/data-grid.ts for reusability
- Remove comments that just describe what code does

Co-authored-by: Cursor <cursoragent@cursor.com>

* chore: rebuild registry

* perf: optimize cell variants with Map/Set lookups and rebuild registry

- Add optionByValue Map for O(1) label lookups in SelectCell and MultiSelectCell
- Add selectedValuesSet for O(1) selection checks in MultiSelectCell
- Fix missing @ prefix in tanstack packages in optimizePackageImports
- Rebuild registry

Co-authored-by: Cursor <cursoragent@cursor.com>

* chore: rebuild registry again

* fix: address Copilot review feedback

- Move event.preventDefault() outside setState callback for synchronous execution
- Cache cellMap per row in serializeCellsToTsv to avoid redundant Map creation
- Fix TypeScript type for rowCellMaps

Co-authored-by: Cursor <cursoragent@cursor.com>

* chore: rebuild registry again again

* chore: update demo

* chore: update callcabks

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: sadmann7

next.config.ts

@@ -11,6 +11,15 @@ const nextConfig: NextConfig = {
   cacheComponents: true,
   // Already doing typechecking as separate task in CI
   typescript: { ignoreBuildErrors: true },
+  experimental: {
+    optimizePackageImports: [
+      "@tanstack/query-db-collection",
+      "@tanstack/react-db",
+      "@tanstack/react-query",
+      "@tanstack/react-table",
+      "@tanstack/react-virtual",
+    ],
+  },
 };
 
 export default nextConfig;

public/r/data-grid-filter-menu.json

@@ -99,10 +99,7 @@ export function DataGridDemo() {
 
   const columns = React.useMemo<ColumnDef<Person>[]>(
     () => [
-      getDataGridSelectColumn<Person>({
-        enableRowMarkers: true,
-        readOnly: true,
-      }),
+      getDataGridSelectColumn<Person>({ enableRowMarkers: true }),
       {
         id: "name",
         accessorKey: "name",

public/r/data-grid-sort-menu.json

@@ -874,6 +874,10 @@ export function SelectCell<TData>({
   const containerRef = React.useRef<HTMLDivElement>(null);
   const cellOpts = cell.column.columnDef.meta?.cell;
   const options = cellOpts?.variant === "select" ? cellOpts.options : [];
+  const optionByValue = React.useMemo(
+    () => new Map(options.map((option) => [option.value, option])),
+    [options],
+  );
 
   const prevInitialValueRef = React.useRef(initialValue);
   if (initialValue !== prevInitialValueRef.current) {
@@ -918,8 +922,7 @@ export function SelectCell<TData>({
     [isEditing, isFocused, initialValue, tableMeta],
   );
 
-  const displayLabel =
-    options.find((opt) => opt.value === value)?.label ?? value;
+  const displayLabel = optionByValue.get(value)?.label ?? value;
 
   return (
     <DataGridCellWrapper<TData>
@@ -1015,6 +1018,10 @@ export function MultiSelectCell<TData>({
   const inputRef = React.useRef<HTMLInputElement>(null);
   const cellOpts = cell.column.columnDef.meta?.cell;
   const options = cellOpts?.variant === "multi-select" ? cellOpts.options : [];
+  const optionByValue = React.useMemo(
+    () => new Map(options.map((option) => [option.value, option])),
+    [options],
+  );
   const sideOffset = -(containerRef.current?.clientHeight ?? 0);
 
   const prevCellValueRef = React.useRef(cellValue);
@@ -1031,30 +1038,38 @@ export function MultiSelectCell<TData>({
   const onValueChange = React.useCallback(
     (value: string) => {
       if (readOnly) return;
-      const newValues = selectedValues.includes(value)
-        ? selectedValues.filter((v) => v !== value)
-        : [...selectedValues, value];
-
-      setSelectedValues(newValues);
-      tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });
+      let newValues: string[] = [];
+      setSelectedValues((curr) => {
+        newValues = curr.includes(value)
+          ? curr.filter((v) => v !== value)
+          : [...curr, value];
+        return newValues;
+      });
+      queueMicrotask(() => {
+        tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });
+        inputRef.current?.focus();
+      });
       setSearchValue("");
-      queueMicrotask(() => inputRef.current?.focus());
     },
-    [selectedValues, tableMeta, rowIndex, columnId, readOnly],
+    [tableMeta, rowIndex, columnId, readOnly],
   );
 
   const removeValue = React.useCallback(
     (valueToRemove: string, event?: React.MouseEvent) => {
       if (readOnly) return;
       event?.stopPropagation();
       event?.preventDefault();
-      const newValues = selectedValues.filter((v) => v !== valueToRemove);
-      setSelectedValues(newValues);
-      tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });
-      // Focus back on input after removing
-      setTimeout(() => inputRef.current?.focus(), 0);
+      let newValues: string[] = [];
+      setSelectedValues((curr) => {
+        newValues = curr.filter((v) => v !== valueToRemove);
+        return newValues;
+      });
+      queueMicrotask(() => {
+        tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });
+        inputRef.current?.focus();
+      });
     },
-    [selectedValues, tableMeta, rowIndex, columnId, readOnly],
+    [tableMeta, rowIndex, columnId, readOnly],
   );
 
   const clearAll = React.useCallback(() => {
@@ -1103,31 +1118,37 @@ export function MultiSelectCell<TData>({
 
   const onInputKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLInputElement>) => {
-      // Handle backspace when input is empty - remove last selected item
-      if (
-        event.key === "Backspace" &&
-        searchValue === "" &&
-        selectedValues.length > 0
-      ) {
+      if (event.key === "Backspace" && searchValue === "") {
         event.preventDefault();
-        const lastValue = selectedValues[selectedValues.length - 1];
-        if (lastValue) {
-          removeValue(lastValue);
-        }
+        let newValues: string[] | null = null;
+        setSelectedValues((curr) => {
+          if (curr.length === 0) return curr;
+          newValues = curr.slice(0, -1);
+          return newValues;
+        });
+        queueMicrotask(() => {
+          if (newValues !== null) {
+            tableMeta?.onDataUpdate?.({ rowIndex, columnId, value: newValues });
+          }
+          inputRef.current?.focus();
+        });
       }
-      // Prevent escape from propagating to close the popover immediately
-      // Let the command handle it first
       if (event.key === "Escape") {
         event.stopPropagation();
       }
     },
-    [searchValue, selectedValues, removeValue],
+    [searchValue, tableMeta, rowIndex, columnId],
   );
 
   const displayLabels = selectedValues
-    .map((val) => options.find((opt) => opt.value === val)?.label ?? val)
+    .map((val) => optionByValue.get(val)?.label ?? val)
     .filter(Boolean);
 
+  const selectedValuesSet = React.useMemo(
+    () => new Set(selectedValues),
+    [selectedValues],
+  );
+
   const lineCount = getLineCount(rowHeight);
 
   const { visibleItems: visibleLabels, hiddenCount: hiddenBadgeCount } =
@@ -1169,8 +1190,7 @@ export function MultiSelectCell<TData>({
             <Command className="**:data-[slot=command-input-wrapper]:h-auto **:data-[slot=command-input-wrapper]:border-none **:data-[slot=command-input-wrapper]:p-0 [&_[data-slot=command-input-wrapper]_svg]:hidden">
               <div className="flex min-h-9 flex-wrap items-center gap-1 border-b px-3 py-1.5">
                 {selectedValues.map((value) => {
-                  const option = options.find((opt) => opt.value === value);
-                  const label = option?.label ?? value;
+                  const label = optionByValue.get(value)?.label ?? value;
 
                   return (
                     <Badge
@@ -1205,7 +1225,7 @@ export function MultiSelectCell<TData>({
                 <CommandEmpty>No options found.</CommandEmpty>
                 <CommandGroup className="max-h-[300px] scroll-py-1 overflow-y-auto overflow-x-hidden">
                   {options.map((option) => {
-                    const isSelected = selectedValues.includes(option.value);
+                    const isSelected = selectedValuesSet.has(option.value);
 
                     return (
                       <CommandItem

public/r/data-grid.json

@@ -53,9 +53,14 @@ import { cn } from "@/lib/utils";
 import type { FilterOperator, FilterValue } from "@/types/data-grid";
 
 const FILTER_SHORTCUT_KEY = "f";
-const REMOVE_FILTER_SHORTCUTS = ["backspace", "delete"];
+const REMOVE_FILTER_SHORTCUTS = new Set(["backspace", "delete"]);
 const FILTER_DEBOUNCE_MS = 300;
-const OPERATORS_WITHOUT_VALUE = ["isEmpty", "isNotEmpty", "isTrue", "isFalse"];
+const OPERATORS_WITHOUT_VALUE = new Set([
+  "isEmpty",
+  "isNotEmpty",
+  "isTrue",
+  "isFalse",
+]);
 
 interface DataGridFilterMenuProps<TData>
   extends React.ComponentProps<typeof PopoverContent> {
@@ -177,7 +182,7 @@ export function DataGridFilterMenu<TData>({
   const onTriggerKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLButtonElement>) => {
       if (
-        REMOVE_FILTER_SHORTCUTS.includes(event.key.toLowerCase()) &&
+        REMOVE_FILTER_SHORTCUTS.has(event.key.toLowerCase()) &&
         columnFilters.length > 0
       ) {
         event.preventDefault();
@@ -340,7 +345,7 @@ function DataGridFilterItem<TData>({
   const operator = filterValue?.operator ?? getDefaultOperator(variant);
 
   const operators = getOperatorsForVariant(variant);
-  const needsValue = !OPERATORS_WITHOUT_VALUE.includes(operator);
+  const needsValue = !OPERATORS_WITHOUT_VALUE.has(operator);
 
   const column = table.getColumn(filter.id);
 
@@ -357,7 +362,7 @@ function DataGridFilterItem<TData>({
         return;
       }
 
-      if (REMOVE_FILTER_SHORTCUTS.includes(event.key.toLowerCase())) {
+      if (REMOVE_FILTER_SHORTCUTS.has(event.key.toLowerCase())) {
         event.preventDefault();
         onFilterRemove(filter.id);
       }

src/app/data-grid/components/data-grid-demo.tsx

@@ -211,7 +211,7 @@ function DataGridRowImpl<TData>({
       {...props}
       ref={rowRef}
       className={cn(
-        "absolute flex w-full border-b",
+        "absolute flex w-full border-b [content-visibility:auto]",
         !adjustLayout && "will-change-transform",
         className,
       )}

src/components/data-grid/data-grid-cell-variants.tsx

@@ -42,7 +42,7 @@ import {
 import { cn } from "@/lib/utils";
 
 const SORT_SHORTCUT_KEY = "s";
-const REMOVE_SORT_SHORTCUTS = ["backspace", "delete"];
+const REMOVE_SORT_SHORTCUTS = new Set(["backspace", "delete"]);
 
 const SORT_ORDERS = [
   { label: "Asc", value: "asc" },
@@ -156,7 +156,7 @@ export function DataGridSortMenu<TData>({
   const onTriggerKeyDown = React.useCallback(
     (event: React.KeyboardEvent<HTMLButtonElement>) => {
       if (
-        REMOVE_SORT_SHORTCUTS.includes(event.key.toLowerCase()) &&
+        REMOVE_SORT_SHORTCUTS.has(event.key.toLowerCase()) &&
         sorting.length > 0
       ) {
         event.preventDefault();
@@ -313,7 +313,7 @@ function DataTableSortItem({
         return;
       }
 
-      if (REMOVE_SORT_SHORTCUTS.includes(event.key.toLowerCase())) {
+      if (REMOVE_SORT_SHORTCUTS.has(event.key.toLowerCase())) {
         event.preventDefault();
         onSortRemove(sort.id);
       }