From e4c6692e296563d44e6258d2f0592af9f4381a15 Mon Sep 17 00:00:00 2001
From: Tomas Cerskus <tomas-c@users.noreply.github.com>
Date: Thu, 16 May 2024 18:06:37 +0100
Subject: [PATCH] Completely get rid of useEffect in Frame component

---
 packages/core/src/render/Frame.tsx | 47 +++++++++++-------------------
 1 file changed, 17 insertions(+), 30 deletions(-)

diff --git a/packages/core/src/render/Frame.tsx b/packages/core/src/render/Frame.tsx
index 214ddab6..96e1813d 100644
--- a/packages/core/src/render/Frame.tsx
+++ b/packages/core/src/render/Frame.tsx
@@ -1,5 +1,5 @@
 import { deprecationWarning, ROOT_NODE } from '@craftjs/utils';
-import React, { useEffect, useRef } from 'react';
+import React, { useRef } from 'react';
 
 import { useInternalEditor } from '../editor/useInternalEditor';
 import { SerializedNodes } from '../interfaces';
@@ -39,41 +39,28 @@ export const Frame: React.FC<React.PropsWithChildren<FrameProps>> = ({
     });
   }
 
-  const initialState = useRef({
-    initialChildren: children,
-    initialData: data || json,
-  });
+  const isLoaded = useRef(false);
 
-  const isInitialLoadedRef = useRef(false);
+  if (!isLoaded.current) {
+    const initialData = data || json;
 
-  if (!isInitialLoadedRef.current && initialState.current.initialData) {
-    actions.history.ignore().deserialize(initialState.current.initialData);
-    isInitialLoadedRef.current = true;
-  }
-
-  useEffect(() => {
-    const { initialChildren } = initialState.current;
+    if (initialData) {
+      actions.history.ignore().deserialize(initialData);
+    } else {
+      const rootNode = React.Children.only(children) as React.ReactElement;
 
-    // Prevent recreating Nodes from child elements if we already did it the first time
-    // Usually an issue in React Strict Mode where this hook is called twice which results in orphaned Nodes
-    const isInitialLoaded = isInitialLoadedRef.current;
+      const node = query.parseReactElement(rootNode).toNodeTree((node, jsx) => {
+        if (jsx === rootNode) {
+          node.id = ROOT_NODE;
+        }
+        return node;
+      });
 
-    if (!initialChildren || isInitialLoaded) {
-      return;
+      actions.history.ignore().addNodeTree(node);
     }
 
-    const rootNode = React.Children.only(initialChildren) as React.ReactElement;
-
-    const node = query.parseReactElement(rootNode).toNodeTree((node, jsx) => {
-      if (jsx === rootNode) {
-        node.id = ROOT_NODE;
-      }
-      return node;
-    });
-
-    actions.history.ignore().addNodeTree(node);
-    isInitialLoadedRef.current = true;
-  }, [actions, query]);
+    isLoaded.current = true;
+  }
 
   return <RenderRootNode />;
 };