diff --git a/web/app/components/workflow/candidate-node-main.tsx b/web/app/components/workflow/candidate-node-main.tsx
new file mode 100644
index 0000000000..41a38e0b2a
--- /dev/null
+++ b/web/app/components/workflow/candidate-node-main.tsx
@@ -0,0 +1,119 @@
+import type {
+  FC,
+} from 'react'
+import type {
+  Node,
+} from '@/app/components/workflow/types'
+import {
+  memo,
+} from 'react'
+import { produce } from 'immer'
+import {
+  useReactFlow,
+  useStoreApi,
+  useViewport,
+} from 'reactflow'
+import { useEventListener } from 'ahooks'
+import {
+  useStore,
+  useWorkflowStore,
+} from './store'
+import { WorkflowHistoryEvent, useAutoGenerateWebhookUrl, useNodesInteractions, useNodesSyncDraft, useWorkflowHistory } from './hooks'
+import { CUSTOM_NODE } from './constants'
+import { getIterationStartNode, getLoopStartNode } from './utils'
+import CustomNode from './nodes'
+import CustomNoteNode from './note-node'
+import { CUSTOM_NOTE_NODE } from './note-node/constants'
+import { BlockEnum } from './types'
+
+type Props = {
+  candidateNode: Node
+}
+const CandidateNodeMain: FC<Props> = ({
+  candidateNode,
+}) => {
+  const store = useStoreApi()
+  const reactflow = useReactFlow()
+  const workflowStore = useWorkflowStore()
+  const mousePosition = useStore(s => s.mousePosition)
+  const { zoom } = useViewport()
+  const { handleNodeSelect } = useNodesInteractions()
+  const { saveStateToHistory } = useWorkflowHistory()
+  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
+  const autoGenerateWebhookUrl = useAutoGenerateWebhookUrl()
+
+  useEventListener('click', (e) => {
+    e.preventDefault()
+    const {
+      getNodes,
+      setNodes,
+    } = store.getState()
+    const { screenToFlowPosition } = reactflow
+    const nodes = getNodes()
+    const { x, y } = screenToFlowPosition({ x: mousePosition.pageX, y: mousePosition.pageY })
+    const newNodes = produce(nodes, (draft) => {
+      draft.push({
+        ...candidateNode,
+        data: {
+          ...candidateNode.data,
+          _isCandidate: false,
+        },
+        position: {
+          x,
+          y,
+        },
+      })
+      if (candidateNode.data.type === BlockEnum.Iteration)
+        draft.push(getIterationStartNode(candidateNode.id))
+
+      if (candidateNode.data.type === BlockEnum.Loop)
+        draft.push(getLoopStartNode(candidateNode.id))
+    })
+    setNodes(newNodes)
+    if (candidateNode.type === CUSTOM_NOTE_NODE)
+      saveStateToHistory(WorkflowHistoryEvent.NoteAdd, { nodeId: candidateNode.id })
+    else
+      saveStateToHistory(WorkflowHistoryEvent.NodeAdd, { nodeId: candidateNode.id })
+
+    workflowStore.setState({ candidateNode: undefined })
+
+    if (candidateNode.type === CUSTOM_NOTE_NODE)
+      handleNodeSelect(candidateNode.id)
+
+    if (candidateNode.data.type === BlockEnum.TriggerWebhook) {
+      handleSyncWorkflowDraft(true, true, {
+        onSuccess: () => autoGenerateWebhookUrl(candidateNode.id),
+      })
+    }
+  })
+
+  useEventListener('contextmenu', (e) => {
+    e.preventDefault()
+    workflowStore.setState({ candidateNode: undefined })
+  })
+
+  return (
+    <div
+      className='absolute z-10'
+      style={{
+        left: mousePosition.elementX,
+        top: mousePosition.elementY,
+        transform: `scale(${zoom})`,
+        transformOrigin: '0 0',
+      }}
+    >
+      {
+        candidateNode.type === CUSTOM_NODE && (
+          <CustomNode {...candidateNode as any} />
+        )
+      }
+      {
+        candidateNode.type === CUSTOM_NOTE_NODE && (
+          <CustomNoteNode {...candidateNode as any} />
+        )
+      }
+    </div>
+  )
+}
+
+export default memo(CandidateNodeMain)
diff --git a/web/app/components/workflow/candidate-node.tsx b/web/app/components/workflow/candidate-node.tsx
index 54daf13ebc..bdbb1f4433 100644
--- a/web/app/components/workflow/candidate-node.tsx
+++ b/web/app/components/workflow/candidate-node.tsx
@@ -1,118 +1,19 @@
 import {
   memo,
 } from 'react'
-import { produce } from 'immer'
-import {
-  useReactFlow,
-  useStoreApi,
-  useViewport,
-} from 'reactflow'
-import { useEventListener } from 'ahooks'
+
 import {
   useStore,
-  useWorkflowStore,
 } from './store'
-import { WorkflowHistoryEvent, useAutoGenerateWebhookUrl, useNodesInteractions, useNodesSyncDraft, useWorkflowHistory } from './hooks'
-import { CUSTOM_NODE } from './constants'
-import { getIterationStartNode, getLoopStartNode } from './utils'
-import CustomNode from './nodes'
-import CustomNoteNode from './note-node'
-import { CUSTOM_NOTE_NODE } from './note-node/constants'
-import { BlockEnum } from './types'
+import CandidateNodeMain from './candidate-node-main'
 
 const CandidateNode = () => {
-  const store = useStoreApi()
-  const reactflow = useReactFlow()
-  const workflowStore = useWorkflowStore()
   const candidateNode = useStore(s => s.candidateNode)
-  const mousePosition = useStore(s => s.mousePosition)
-  const { zoom } = useViewport()
-  const { handleNodeSelect } = useNodesInteractions()
-  const { saveStateToHistory } = useWorkflowHistory()
-  const { handleSyncWorkflowDraft } = useNodesSyncDraft()
-  const autoGenerateWebhookUrl = useAutoGenerateWebhookUrl()
-
-  useEventListener('click', (e) => {
-    const { candidateNode, mousePosition } = workflowStore.getState()
-
-    if (candidateNode) {
-      e.preventDefault()
-      const {
-        getNodes,
-        setNodes,
-      } = store.getState()
-      const { screenToFlowPosition } = reactflow
-      const nodes = getNodes()
-      const { x, y } = screenToFlowPosition({ x: mousePosition.pageX, y: mousePosition.pageY })
-      const newNodes = produce(nodes, (draft) => {
-        draft.push({
-          ...candidateNode,
-          data: {
-            ...candidateNode.data,
-            _isCandidate: false,
-          },
-          position: {
-            x,
-            y,
-          },
-        })
-        if (candidateNode.data.type === BlockEnum.Iteration)
-          draft.push(getIterationStartNode(candidateNode.id))
-
-        if (candidateNode.data.type === BlockEnum.Loop)
-          draft.push(getLoopStartNode(candidateNode.id))
-      })
-      setNodes(newNodes)
-      if (candidateNode.type === CUSTOM_NOTE_NODE)
-        saveStateToHistory(WorkflowHistoryEvent.NoteAdd, { nodeId: candidateNode.id })
-      else
-        saveStateToHistory(WorkflowHistoryEvent.NodeAdd, { nodeId: candidateNode.id })
-
-      workflowStore.setState({ candidateNode: undefined })
-
-      if (candidateNode.type === CUSTOM_NOTE_NODE)
-        handleNodeSelect(candidateNode.id)
-
-      if (candidateNode.data.type === BlockEnum.TriggerWebhook) {
-        handleSyncWorkflowDraft(true, true, {
-          onSuccess: () => autoGenerateWebhookUrl(candidateNode.id),
-        })
-      }
-    }
-  })
-
-  useEventListener('contextmenu', (e) => {
-    const { candidateNode } = workflowStore.getState()
-    if (candidateNode) {
-      e.preventDefault()
-      workflowStore.setState({ candidateNode: undefined })
-    }
-  })
-
   if (!candidateNode)
     return null
 
   return (
-    <div
-      className='absolute z-10'
-      style={{
-        left: mousePosition.elementX,
-        top: mousePosition.elementY,
-        transform: `scale(${zoom})`,
-        transformOrigin: '0 0',
-      }}
-    >
-      {
-        candidateNode.type === CUSTOM_NODE && (
-          <CustomNode {...candidateNode as any} />
-        )
-      }
-      {
-        candidateNode.type === CUSTOM_NOTE_NODE && (
-          <CustomNoteNode {...candidateNode as any} />
-        )
-      }
-    </div>
+    <CandidateNodeMain candidateNode={candidateNode} />
   )
 }