Optimize expanded image preview rerenders

apps/web/src/components/chat/ExpandedImageDialog.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useState } from "react";
+import { useEffect, useEffectEvent, useState } from "react";
 import { ChevronLeftIcon, ChevronRightIcon, XIcon } from "lucide-react";
 import { Button } from "../ui/button";
 import type { ExpandedImagePreview } from "./ExpandedImagePreview";
@@ -8,52 +8,78 @@ interface ExpandedImageDialogProps {
   onClose: () => void;
 }
 
-export const ExpandedImageDialog = memo(function ExpandedImageDialog({
-  preview: initialPreview,
-  onClose,
-}: ExpandedImageDialogProps) {
-  const [preview, setPreview] = useState(initialPreview);
-
-  // Sync when the parent hands us a new preview reference.
-  useEffect(() => {
-    setPreview(initialPreview);
-  }, [initialPreview]);
+export function ExpandedImageDialog({ preview, onClose }: ExpandedImageDialogProps) {
+  return (
+    <ExpandedImageDialogContent
+      key={getPreviewResetKey(preview)}
+      preview={preview}
+      onClose={onClose}
+    />
+  );
+}
 
-  const navigateImage = useCallback((direction: -1 | 1) => {
-    setPreview((existing) => {
-      if (existing.images.length <= 1) return existing;
-      const nextIndex =
-        (existing.index + direction + existing.images.length) % existing.images.length;
-      if (nextIndex === existing.index) return existing;
-      return { ...existing, index: nextIndex };
-    });
-  }, []);
+function getPreviewResetKey(preview: ExpandedImagePreview): string {
+  return [
+    preview.index,
+    preview.images.length,
+    ...preview.images.map((image) => `${image.src}\u0000${image.name}`),
+  ].join("\u0001");
+}
 
-  useEffect(() => {
-    const onKeyDown = (event: globalThis.KeyboardEvent) => {
-      if (event.key === "Escape") {
-        event.preventDefault();
-        event.stopPropagation();
-        onClose();
-        return;
-      }
-      if (preview.images.length <= 1) return;
-      if (event.key === "ArrowLeft") {
-        event.preventDefault();
-        event.stopPropagation();
-        navigateImage(-1);
-        return;
-      }
-      if (event.key !== "ArrowRight") return;
+function useExpandedImageKeyboardShortcuts(input: {
+  readonly canNavigate: boolean;
+  readonly onClose: () => void;
+  readonly onNext: () => void;
+  readonly onPrevious: () => void;
+}) {
+  const handleKeyDown = useEffectEvent((event: globalThis.KeyboardEvent) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      input.onClose();
+      return;
+    }
+    if (!input.canNavigate) return;
+    if (event.key === "ArrowLeft") {
       event.preventDefault();
       event.stopPropagation();
-      navigateImage(1);
-    };
+      input.onPrevious();
+      return;
+    }
+    if (event.key !== "ArrowRight") return;
+    event.preventDefault();
+    event.stopPropagation();
+    input.onNext();
+  });
+
+  useEffect(() => {
+    const onKeyDown = (event: globalThis.KeyboardEvent) => handleKeyDown(event);
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
-  }, [navigateImage, onClose, preview.images.length]);
+  }, []);
+}
 
-  const item = preview.images[preview.index];
+function ExpandedImageDialogContent({ preview, onClose }: ExpandedImageDialogProps) {
+  const [indexOffset, setIndexOffset] = useState(0);
+  const images = preview.images;
+  const canNavigate = images.length > 1;
+  const currentIndex = canNavigate
+    ? (preview.index + indexOffset + images.length) % images.length
+    : preview.index;
+
+  const navigateImage = (direction: -1 | 1) => {
+    if (!canNavigate) return;
+    setIndexOffset((existingOffset) => existingOffset + direction);
+  };
+
+  useExpandedImageKeyboardShortcuts({
+    canNavigate,
+    onClose,
+    onNext: () => navigateImage(1),
+    onPrevious: () => navigateImage(-1),
+  });
+
+  const item = images[currentIndex];
   if (!item) return null;
 
   return (
@@ -69,7 +95,7 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
         aria-label="Close image preview"
         onClick={onClose}
       />
-      {preview.images.length > 1 && (
+      {canNavigate && (
         <Button
           type="button"
           size="icon"
@@ -100,10 +126,10 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
         />
         <p className="mt-2 max-w-[92vw] truncate text-center text-xs text-muted-foreground/80">
           {item.name}
-          {preview.images.length > 1 ? ` (${preview.index + 1}/${preview.images.length})` : ""}
+          {canNavigate ? ` (${currentIndex + 1}/${images.length})` : ""}
         </p>
       </div>
-      {preview.images.length > 1 && (
+      {canNavigate && (
         <Button
           type="button"
           size="icon"
@@ -117,4 +143,4 @@ export const ExpandedImageDialog = memo(function ExpandedImageDialog({
       )}
     </div>
   );
-});
+}

docs/perf/expanded-image-dialog-react-scan-after.json

@@ -0,0 +1,8 @@
+{
+  "hasReactScan": true,
+  "summary": "Profiler commits: 3 total (1 mount, 2 update), last 1.20ms",
+  "report": {
+    "reactScanReport": null,
+    "renderEvents": []
+  }
+}

docs/perf/expanded-image-dialog-react-scan-before.json

@@ -0,0 +1,8 @@
+{
+  "hasReactScan": true,
+  "summary": "Profiler commits: 5 total (1 mount, 4 update), last 0.20ms",
+  "report": {
+    "reactScanReport": null,
+    "renderEvents": []
+  }
+}