add custom arePropsEqual function to useMemo

aaronmcadam · Aug 5, 2024 · 0fd7146 · 0fd7146
1 parent ce1a12c
commit 0fd7146
Showing 1 changed file with 51 additions and 42 deletions.
diff --git a/src/components/quiz-option.tsx b/src/components/quiz-option.tsx
@@ -10,46 +10,55 @@ export type QuizOptionProps = {
   value: string | boolean;
 };
 
-export const QuizOption = React.memo(function QuizOption({
-  onClick,
-  isSelected,
-  display,
-  value,
-}: QuizOptionProps) {
-  const type = display === "Yes" || display === "No" ? "boolean" : "image";
+export const QuizOption = React.memo(
+  function QuizOption({
+    onClick,
+    isSelected,
+    display,
+    value,
+  }: QuizOptionProps) {
+    const type = display === "Yes" || display === "No" ? "boolean" : "image";
 
-  return (
-    <Button
-      onClick={onClick}
-      variant="outline"
-      className={cn(
-        "mt-2 h-auto flex flex-col items-center justify-center relative",
-        {
-          "ring-2 ring-primary": isSelected,
-          // TODO: only apply this after clicking the option because otherwise, when navigating back to a question,
-          // the selected option will blink.
-          "animate-blink": isSelected,
-        },
-      )}
-    >
-      {isSelected ? (
-        <CircleCheck className="h-5 w-5 text-primary absolute top-2 right-2" />
-      ) : null}
-      {display === "Yes" ? (
-        <div className="flex items-center h-[154px]">
-          <Check className="flex-grow text-brand-600 h-16 w-16" />
-        </div>
-      ) : null}
-      {display === "No" ? (
-        <div className="flex items-center h-[154px]">
-          <X className="text-brand-600 h-16 w-16" />
-        </div>
-      ) : null}
-      <span
-        className={cn({ "h-[154px]": type === "image" })}
-        dangerouslySetInnerHTML={{ __html: display }}
-      />
-      {value}
-    </Button>
-  );
-});
+    return (
+      <Button
+        onClick={onClick}
+        variant="outline"
+        className={cn(
+          "mt-2 h-auto flex flex-col items-center justify-center relative",
+          {
+            "ring-2 ring-primary": isSelected,
+            // TODO: only apply this after clicking the option because otherwise, when navigating back to a question,
+            // the selected option will blink.
+            "animate-blink": isSelected,
+          },
+        )}
+      >
+        {isSelected ? (
+          <CircleCheck className="h-5 w-5 text-primary absolute top-2 right-2" />
+        ) : null}
+        {display === "Yes" ? (
+          <div className="flex items-center h-[154px]">
+            <Check className="flex-grow text-brand-600 h-16 w-16" />
+          </div>
+        ) : null}
+        {display === "No" ? (
+          <div className="flex items-center h-[154px]">
+            <X className="text-brand-600 h-16 w-16" />
+          </div>
+        ) : null}
+        <span
+          className={cn({ "h-[154px]": type === "image" })}
+          dangerouslySetInnerHTML={{ __html: display }}
+        />
+        {value}
+      </Button>
+    );
+  },
+  (prevProps, nextProps) => {
+    const arePropsEqual =
+      prevProps.isSelected === nextProps.isSelected &&
+      prevProps.display === nextProps.display;
+
+    return arePropsEqual;
+  },
+);