export memoized version of Image

Author: EvgeniLeonti

src/Image.tsx

@@ -1,10 +1,44 @@
-import { useState, MouseEvent } from "react";
+import {useState, MouseEvent, memo} from "react";
 import { CheckButton } from "./CheckButton";
 import { ImageExtended, ImageProps } from "./types";
 import * as styles from "./styles";
 import { getStyle } from "./styles";
 
-export const Image = <T extends ImageExtended>({
+const imagePropsAreEqual = (prevProps: ImageProps, currProps: ImageProps) => {
+ // states are the same iff the props are the same
+
+ const {
+ item: prevItem,
+ index: prevIndex,
+ margin: prevMargin,
+ height: prevHeight,
+ isSelectable: prevIsSelectable,
+ } = prevProps;
+
+ const {
+ item: currItem,
+ index: currIndex,
+ margin: currMargin,
+ height: currHeight,
+ isSelectable: currIsSelectable,
+ } = currProps;
+
+ return (
+ prevItem.src === currItem.src &&
+ prevItem.width === currItem.width &&
+ prevItem.height === currItem.height &&
+ prevItem.scaledHeight === currItem.scaledHeight &&
+ prevItem.scaledWidth === currItem.scaledWidth &&
+ prevItem.viewportWidth === currItem.viewportWidth &&
+ prevItem.marginLeft === currItem.marginLeft &&
+ prevIndex === currIndex &&
+ prevMargin === currMargin &&
+ prevHeight === currHeight &&
+ prevIsSelectable === currIsSelectable
+ );
+};
+
+const ImageBase = <T extends ImageExtended>({
  item,
  thumbnailImageComponent: ThumbnailImageComponent,
  isSelectable = true,
@@ -132,3 +166,5 @@ export const Image = <T extends ImageExtended>({
  </div>
  );
 };
+
+export const Image = memo(ImageBase, imagePropsAreEqual);