fix: hydration error in strict mode

prevwong · May 31, 2024 · dc5befb · dc5befb
1 parent e99cafe
commit dc5befb
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 34 deletions.
diff --git a/.changeset/grumpy-shrimps-call.md b/.changeset/grumpy-shrimps-call.md
@@ -0,0 +1,5 @@
+---
+'@craftjs/core': patch
+---
+
+Fix <Element /> hydration errror in react strict mode
diff --git a/packages/core/src/nodes/Element.tsx b/packages/core/src/nodes/Element.tsx
@@ -1,5 +1,5 @@
 import { ERROR_TOP_LEVEL_ELEMENT_NO_ID } from '@craftjs/utils';
-import React, { useState } from 'react';
+import React from 'react';
 import invariant from 'tiny-invariant';
 
 import { NodeElement } from './NodeElement';
@@ -40,45 +40,38 @@ export function Element<T extends React.ElementType>({
   };
 
   const { query, actions } = useInternalEditor();
-  const { node, inNodeContext } = useInternalNode((node) => ({
+  const { node } = useInternalNode((node) => ({
     node: {
       id: node.id,
       data: node.data,
     },
   }));
 
-  const [linkedNodeId] = useState<NodeId | null>(() => {
-    invariant(!!id, ERROR_TOP_LEVEL_ELEMENT_NO_ID);
-    const { id: nodeId, data } = node;
-
-    if (inNodeContext) {
-      let linkedNodeId;
-
-      const existingNode =
-        data.linkedNodes &&
-        data.linkedNodes[id] &&
-        query.node(data.linkedNodes[id]).get();
-
-      // Render existing linked Node if it already exists (and is the same type as the JSX)
-      if (existingNode && existingNode.data.type === is) {
-        linkedNodeId = existingNode.id;
-      } else {
-        // otherwise, create and render a new linked Node
-        const linkedElement = React.createElement(
-          Element,
-          elementProps,
-          children
-        );
-
-        const tree = query.parseReactElement(linkedElement).toNodeTree();
-
-        linkedNodeId = tree.rootNodeId;
-        actions.history.ignore().addLinkedNodeFromTree(tree, nodeId, id);
-      }
-      return linkedNodeId;
-    }
+  invariant(!!id, ERROR_TOP_LEVEL_ELEMENT_NO_ID);
+
+  let linkedNodeId: string;
+
+  const { id: nodeId, data } = node;
+
+  const existingNode =
+    data.linkedNodes &&
+    data.linkedNodes[id] &&
+    query.node(data.linkedNodes[id]).get();
+
+  if (existingNode && existingNode.data.type === is) {
+    linkedNodeId = existingNode.id;
+  } else {
+    const linkedElement = React.createElement(Element, elementProps, children);
+
+    const tree = query.parseReactElement(linkedElement).toNodeTree();
+
+    linkedNodeId = tree.rootNodeId;
+    actions.history.ignore().addLinkedNodeFromTree(tree, nodeId, id);
+  }
+
+  if (!linkedNodeId) {
     return null;
-  });
+  }
 
-  return linkedNodeId ? <NodeElement id={linkedNodeId} /> : null;
+  return <NodeElement id={linkedNodeId} />;
 }