From cefded59ba6029fcc4cb26f190d960bf10eafee0 Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Mon, 13 Jun 2022 22:54:13 +0200
Subject: [PATCH] fix infinite loop

---
 app/canvas/features/wrapper-component/use-css.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/app/canvas/features/wrapper-component/use-css.tsx b/app/canvas/features/wrapper-component/use-css.tsx
index f6265c8326..4e664fc23a 100644
--- a/app/canvas/features/wrapper-component/use-css.tsx
+++ b/app/canvas/features/wrapper-component/use-css.tsx
@@ -18,7 +18,7 @@ type UpdatesReset = Array<{
   value: undefined;
 }>;
 
-const usePreviewCss = (instance: Instance) => {
+const usePreviewCss = ({ instance, css }: UseCssProps) => {
   const [previewCss, setPreviewCss] = useState<
     StyleUpdates["updates"] | UpdatesReset
   >([]);
@@ -37,7 +37,11 @@ const usePreviewCss = (instance: Instance) => {
       value: undefined,
     }));
     setPreviewCss(reset);
-  }, [previewCss]);
+    // previewCss in deps leads to an infinite loop, css is like a cache key in this case,
+    // as soon as `css` changes we can reset the preview
+    // @todo need a more correct approach than this
+    // eslint-disable-next-line  react-hooks/exhaustive-deps
+  }, [css]);
 
   return previewCss;
 };
@@ -47,13 +51,13 @@ const emptyStyle = {
     outline: "1px dashed #555",
     outlineOffset: -1,
   },
-}
+};
 
 export const useCss = ({ instance, css }: UseCssProps): string => {
-  const previewCss = usePreviewCss(instance);
+  const previewCss = usePreviewCss({ instance, css });
 
   return useMemo(() => {
-    const overrides: CSS = {...emptyStyle};
+    const overrides: CSS = { ...emptyStyle };
     for (const update of previewCss) {
       if (update.value === undefined) continue;
       overrides[update.property as string] = toValue(update.value);