Merge pull request #3745 from udecode/fix/use-dnd-node-state-change-during-render

Fix: `useDndNode` calls a state setter during its render function

Author: zbeyens

.changeset/itchy-cups-wonder.md

@@ -0,0 +1,5 @@
+---
+'@udecode/plate-dnd': patch
+---
+
+Fix: `useDndNode` calls a state setter during its render function

packages/dnd/src/hooks/useDndNode.ts

@@ -1,3 +1,4 @@
+import { useEffect } from 'react';
 import { NativeTypes, getEmptyImage } from 'react-dnd-html5-backend';
 
 import type { DropTargetMonitor } from 'react-dnd';
@@ -74,9 +75,12 @@ export const useDndNode = ({
   } else {
     preview(drop(nodeRef));
   }
-  if (!isOver && dropLine) {
-    setDropLine('');
-  }
+
+  useEffect(() => {
+    if (!isOver && dropLine) {
+      setDropLine('');
+    }
+  }, [isOver, dropLine, setDropLine]);
 
   return {
     dragRef,

yarn.lock

@@ -6197,7 +6197,7 @@ __metadata:
   dependencies:
     "@udecode/plate-combobox": "npm:39.0.0"
     "@udecode/plate-markdown": "npm:39.2.0"
-    "@udecode/plate-selection": "npm:39.3.5"
+    "@udecode/plate-selection": "npm:39.3.7"
     ai: "npm:^3.4.10"
     lodash: "npm:^4.17.21"
   peerDependencies:
@@ -7035,7 +7035,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@udecode/plate-selection@npm:39.3.5, @udecode/plate-selection@workspace:^, @udecode/plate-selection@workspace:packages/selection":
+"@udecode/plate-selection@npm:39.3.7, @udecode/plate-selection@workspace:^, @udecode/plate-selection@workspace:packages/selection":
   version: 0.0.0-use.local
   resolution: "@udecode/plate-selection@workspace:packages/selection"
   dependencies:
@@ -7245,7 +7245,7 @@ __metadata:
     "@udecode/plate-reset-node": "npm:39.0.0"
     "@udecode/plate-resizable": "npm:39.1.6"
     "@udecode/plate-select": "npm:39.0.0"
-    "@udecode/plate-selection": "npm:39.3.5"
+    "@udecode/plate-selection": "npm:39.3.7"
     "@udecode/plate-slash-command": "npm:39.0.0"
     "@udecode/plate-suggestion": "npm:39.0.0"
     "@udecode/plate-tabbable": "npm:39.0.0"