From 2b6bf967d812da17103b95230b8d6c6b8f53b606 Mon Sep 17 00:00:00 2001
From: Soof Golan <soofgolan@gmail.com>
Date: Tue, 22 Oct 2024 20:11:52 +0300
Subject: [PATCH] perf: fix re-render loop

---
 website/components/MarkdownCard.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/website/components/MarkdownCard.tsx b/website/components/MarkdownCard.tsx
index 84fb036..69eb3b5 100644
--- a/website/components/MarkdownCard.tsx
+++ b/website/components/MarkdownCard.tsx
@@ -10,20 +10,21 @@ type MarkdownProps = {
   desktopImageBlob?: string;
 };
 
+// NOTE: The query must be defined outside the component
+// Otherwise, it will cause a re-render loop
+const query = {
+  isMobile: {
+    maxWidth: 700,
+  },
+};
+
 export default function MarkdownCard({
   content,
   title,
   desktopImageBlob,
   mobileImageBlob,
 }: MarkdownProps) {
-  const [params, containerRef] = useContainerQuery(
-    {
-      isMobile: {
-        maxWidth: 700,
-      },
-    },
-    {}
-  );
+  const [params, containerRef] = useContainerQuery(query, {});
   const isMobile = params.isMobile;
   const imageUrl = isMobile ? mobileImageBlob : desktopImageBlob;