fix: orphaned nodes when parsing from Frame's children in strict mode (#567)

Author: prevwong

.changeset/old-chicken-lay.md

@@ -0,0 +1,5 @@
+---
+'@craftjs/core': patch
+---
+
+Fix orphaned nodes when parsing from Frame's children in strict mode

packages/core/src/render/Frame.tsx

@@ -44,25 +44,35 @@ export const Frame: React.FC<React.PropsWithChildren<FrameProps>> = ({
     initialData: data || json,
   });
 
+  const isInitialChildrenLoadedRef = useRef(false);
+
   useEffect(() => {
     const { initialChildren, initialData } = initialState.current;
 
     if (initialData) {
       actions.history.ignore().deserialize(initialData);
-    } else if (initialChildren) {
-      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);
+      return;
+    }
+
+    // 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 isInitialChildrenLoaded = isInitialChildrenLoadedRef.current;
+
+    if (!initialChildren || isInitialChildrenLoaded) {
+      return;
     }
+
+    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);
+    isInitialChildrenLoadedRef.current = true;
   }, [actions, query]);
 
   return <RenderRootNode />;