Optimize useDataTableUrlState with memoization

Co-authored-by: jaruesink <4207065+jaruesink@users.noreply.github.com>

Author: google-labs-jules[bot]

packages/components/benchmarks/perf-benchmark.ts

@@ -0,0 +1,35 @@
+
+import { performance } from 'perf_hooks';
+import { dataTableRouterParsers } from '../src/remix-hook-form/data-table-router-parsers';
+
+const ITERATIONS = 10000;
+
+// Create a complex filter state serialized to JSON
+const complexFilters = [
+  { columnId: 'name', type: 'text', operator: 'contains', values: ['John'] },
+  { columnId: 'age', type: 'number', operator: 'between', values: [20, 30] },
+  { columnId: 'status', type: 'select', operator: 'isAnyOf', values: ['active', 'pending'] },
+  { columnId: 'role', type: 'text', operator: 'equals', values: ['admin'] },
+  { columnId: 'department', type: 'text', operator: 'contains', values: ['engineering'] },
+];
+
+const serializedFilters = JSON.stringify(complexFilters);
+
+function runBenchmark() {
+  console.log('Running benchmark...');
+  const start = performance.now();
+
+  for (let i = 0; i < ITERATIONS; i++) {
+    // Simulate the parsing operation that happens in the hook
+    dataTableRouterParsers.filters.parse(serializedFilters);
+  }
+
+  const end = performance.now();
+  const totalTime = end - start;
+  const avgTime = totalTime / ITERATIONS;
+
+  console.log(`Total time for ${ITERATIONS} iterations: ${totalTime.toFixed(2)}ms`);
+  console.log(`Average time per parse: ${avgTime.toFixed(4)}ms`);
+}
+
+runBenchmark();

packages/components/package.json

@@ -86,19 +86,23 @@
   "devDependencies": {
     "@react-router/dev": "^7.0.0",
     "@react-router/node": "^7.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/glob": "^8.1.0",
     "@types/react": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
     "glob": "^11.0.0",
+    "jsdom": "^28.0.0",
     "react": "^19.0.0",
     "tailwindcss": "^4.0.0",
     "typescript": "^5.7.2",
     "vite": "^6.2.2",
     "vite-plugin-dts": "^4.4.0",
     "vite-tsconfig-paths": "^5.1.4",
+    "vitest": "^4.0.18",
     "zod": "^3.24.1"
   }
 }

packages/components/src/remix-hook-form/use-data-table-url-state.test.tsx

@@ -0,0 +1,46 @@
+import { renderHook, act } from '@testing-library/react';
+import { MemoryRouter, useLocation } from 'react-router';
+import { describe, it, expect } from 'vitest';
+import { useDataTableUrlState } from './use-data-table-url-state';
+import React from 'react';
+
+describe('useDataTableUrlState', () => {
+  it('should parse initial state from URL', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <MemoryRouter initialEntries={['/?search=initial&page=2&pageSize=20']}>
+        {children}
+      </MemoryRouter>
+    );
+
+    const { result } = renderHook(() => useDataTableUrlState(), { wrapper });
+
+    expect(result.current.urlState.search).toBe('initial');
+    expect(result.current.urlState.page).toBe(2);
+    expect(result.current.urlState.pageSize).toBe(20);
+  });
+
+  it('should update URL state', () => {
+    let testLocation: any;
+
+    const LocationSpy = () => {
+      testLocation = useLocation();
+      return null;
+    };
+
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <MemoryRouter initialEntries={['/']}>
+        <LocationSpy />
+        {children}
+      </MemoryRouter>
+    );
+
+    const { result } = renderHook(() => useDataTableUrlState(), { wrapper });
+
+    act(() => {
+      result.current.setUrlState({ search: 'updated' });
+    });
+
+    expect(result.current.urlState.search).toBe('updated');
+    expect(testLocation.search).toContain('search=updated');
+  });
+});

packages/components/src/remix-hook-form/use-data-table-url-state.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 import { useSearchParams } from 'react-router';
 import { type DataTableRouterState, dataTableRouterParsers } from './data-table-router-parsers';
 
@@ -14,18 +14,20 @@ export function useDataTableUrlState() {
   const [searchParams, setSearchParams] = useSearchParams();
 
   // Parse URL search parameters using our custom parsers
-  const urlState: DataTableRouterState = {
-    search: dataTableRouterParsers.search.parse(searchParams.get('search')),
-    filters: dataTableRouterParsers.filters.parse(searchParams.get('filters')),
-    page: dataTableRouterParsers.page.parse(searchParams.get('page')),
-    pageSize: dataTableRouterParsers.pageSize.parse(searchParams.get('pageSize')),
-    sortField: dataTableRouterParsers.sortField.parse(searchParams.get('sortField')),
-    // 'asc' or 'desc'
-    sortOrder: dataTableRouterParsers.sortOrder.parse(searchParams.get('sortOrder')),
-  };
+  const urlState: DataTableRouterState = useMemo(
+    () => ({
+      search: dataTableRouterParsers.search.parse(searchParams.get('search')),
+      filters: dataTableRouterParsers.filters.parse(searchParams.get('filters')),
+      page: dataTableRouterParsers.page.parse(searchParams.get('page')),
+      pageSize: dataTableRouterParsers.pageSize.parse(searchParams.get('pageSize')),
+      sortField: dataTableRouterParsers.sortField.parse(searchParams.get('sortField')),
+      // 'asc' or 'desc'
+      sortOrder: dataTableRouterParsers.sortOrder.parse(searchParams.get('sortOrder')),
+    }),
+    [searchParams],
+  );
 
   // Function to update URL search parameters
-  // biome-ignore lint/correctness/useExhaustiveDependencies: setSearchParams is stable; urlState is read at call time
   const setUrlState = useCallback(
     (newState: Partial<DataTableRouterState>) => {
       const updatedState = { ...urlState, ...newState };
@@ -65,7 +67,7 @@ export function useDataTableUrlState() {
       // Update the URL with the new search parameters
       setSearchParams(newParams, { replace: true });
     },
-    [setSearchParams],
+    [setSearchParams, urlState],
   );
 
   // Return the current URL state and the function to update it

packages/components/src/test/setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

packages/components/vite.config.ts

@@ -28,6 +28,9 @@ export default defineConfig({
           .sync('src/**/*.{ts,tsx}', {
             ignore: [
               'src/**/*.d.ts',
+              'src/**/*.test.tsx',
+              'src/**/*.test.ts',
+              'src/**/test/**',
               'src/**/core/types.ts', // Exclude type-only files to avoid empty chunks
             ],
           })

packages/components/vitest.config.ts

@@ -0,0 +1,12 @@
+/// <reference types="vitest" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./src/test/setup.ts'],
+  },
+});