diff --git a/web/packages/new/photos/pages/duplicates.tsx b/web/packages/new/photos/pages/duplicates.tsx index ef2a2f09b6..e79e63ff8d 100644 --- a/web/packages/new/photos/pages/duplicates.tsx +++ b/web/packages/new/photos/pages/duplicates.tsx @@ -23,9 +23,13 @@ import { Typography, } from "@mui/material"; import { useRouter } from "next/router"; -import React, { useCallback, useEffect, useReducer } from "react"; +import React, { memo, useCallback, useEffect, useReducer } from "react"; import Autosizer from "react-virtualized-auto-sizer"; -import { FixedSizeList, type ListChildComponentProps } from "react-window"; +import { + areEqual, + FixedSizeList, + type ListChildComponentProps, +} from "react-window"; import { deduceDuplicates, type DuplicateGroup } from "../services/dedup"; import { useAppContext } from "../types/context"; @@ -411,42 +415,36 @@ const DuplicatesList: React.FC = ({ ); }; -const renderCount = new Map(); +const ListItem: React.FC> = memo( + ({ index, style, data }) => { + const { duplicateGroups, onToggleSelection } = data; -const ListItem: React.FC> = ({ - index, - style, - data, -}) => { - const { duplicateGroups, onToggleSelection } = data; + const duplicateGroup = duplicateGroups[index]!; + const count = duplicateGroup.items.length; + const itemSize = formattedByteSize(duplicateGroup.itemSize); + const checked = duplicateGroup.isSelected; + const onChange = () => onToggleSelection(index); - const duplicateGroup = duplicateGroups[index]!; - const count = duplicateGroup.items.length; - const itemSize = formattedByteSize(duplicateGroup.itemSize); - const checked = duplicateGroup.isSelected; - const onChange = () => onToggleSelection(index); - - renderCount.set(index, (renderCount.get(index) ?? 0) + 1); - console.log("rendering", index, Object.fromEntries(renderCount.entries())); - - return ( - - - - {pt(`${count} items, ${itemSize} each`)} - - + return ( + + + + {pt(`${count} items, ${itemSize} each`)} + + + - - ); -}; + ); + }, + areEqual, +); interface DeduplicateButtonProps { /**