perf: fix re-render loop

soof-golan · Oct 22, 2024 · 2b6bf96 · 2b6bf96
1 parent a555af2
commit 2b6bf96
Showing 1 changed file with 9 additions and 8 deletions.
diff --git 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;