From ae888c9f53d2a40db71a2633d77b19fa78ca5437 Mon Sep 17 00:00:00 2001
From: ameeribro4-sudo <ameeribro4-sudo@users.noreply.github.com>
Date: Thu, 15 Oct 2026 17:26:52 +0100
Subject: [PATCH] perf(property-list): memoize virtualized property grid

---
 src/components/VirtualizedPropertyGrid.tsx | 29 ++++++++++++++++------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/components/VirtualizedPropertyGrid.tsx b/src/components/VirtualizedPropertyGrid.tsx
index 021def28..50669ddc 100644
--- a/src/components/VirtualizedPropertyGrid.tsx
+++ b/src/components/VirtualizedPropertyGrid.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useRef, useEffect, useState } from 'react';
+import React, { memo, useMemo, useRef, useEffect, useState } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { PropertyCard } from './PropertyCard';
 import type { Property } from '@/types/property';
@@ -10,7 +10,7 @@ interface VirtualizedPropertyGridProps {
   className?: string;
 }
 
-export const VirtualizedPropertyGrid: React.FC<VirtualizedPropertyGridProps> = ({
+const VirtualizedPropertyGridInner: React.FC<VirtualizedPropertyGridProps> = ({
   properties,
   viewMode = 'grid',
   className = ''
@@ -36,12 +36,19 @@ export const VirtualizedPropertyGrid: React.FC<VirtualizedPropertyGridProps> = (
 
   const rowCount = Math.ceil(properties.length / columns);
 
-  const rowVirtualizer = useVirtualizer({
-    count: rowCount,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => (viewMode === 'grid' ? 450 : 200),
-    overscan: 5,
-  });
+  // Keep a stable options object so the virtualizer is only reconfigured when
+  // its inputs change instead of on every render of the grid.
+  const virtualizerOptions = useMemo(
+    () => ({
+      count: rowCount,
+      getScrollElement: () => parentRef.current,
+      estimateSize: () => (viewMode === 'grid' ? 450 : 200),
+      overscan: 5,
+    }),
+    [rowCount, viewMode]
+  );
+
+  const rowVirtualizer = useVirtualizer(virtualizerOptions);
 
   return (
     <div
@@ -95,3 +102,9 @@ export const VirtualizedPropertyGrid: React.FC<VirtualizedPropertyGridProps> = (
     </div>
   );
 };
+
+/**
+ * Memoized so parent re-renders that pass an unchanged `properties` array,
+ * `viewMode` or `className` skip re-rendering the virtualized list entirely.
+ */
+export const VirtualizedPropertyGrid = memo(VirtualizedPropertyGridInner);