diff --git a/packages/flow/src/Diagrams/Panels/FlowDiagram/index.tsx b/packages/flow/src/Diagrams/Panels/FlowDiagram/index.tsx
index 1ef6e71..b878560 100644
--- a/packages/flow/src/Diagrams/Panels/FlowDiagram/index.tsx
+++ b/packages/flow/src/Diagrams/Panels/FlowDiagram/index.tsx
@@ -19,11 +19,13 @@ import ReactFlow, {
 } from 'reactflow';
 import { OPERATOR_TYPE_DATA } from '../OperatorPanel';
 import { OperatorMap, getOperatorFromNode } from '../../Operators';
-import { useDiagramsContext } from '../../State/DiagramsProvider';
+import {
+  useDiagramsContext,
+  useDiagramsHookOption,
+} from '../../State/DiagramsProvider';
 import { nodeTypes } from '../../Nodes';
 import { isSameSourceHandle, isSameTargetHandle } from '../../utils';
 import css from './FlowDiagram.module.less';
-import { useLatest } from 'ahooks';
 import { BackToLayer } from '../LayerPanel/BackToLayer';
 
 const nodeColor = (node: Node) => {
@@ -59,25 +61,8 @@ const getLayoutedElements = (nodes: Node[], edges: Edge[]) => {
 };
 
 export const FlowDiagram: React.FC = () => {
-  const {
-    nodes,
-    edges,
-    setNodes,
-    setEdges,
-    updateEdge,
-    updateNode,
-    setActiveLayerId,
-    setLayer,
-    layer,
-    activeLayerId,
-  } = useDiagramsContext();
-
-  const latestState = useLatest({
-    nodes,
-    edges,
-    layer,
-    activeLayerId,
-  });
+  const { nodes, edges, setNodes, setEdges } = useDiagramsContext();
+  const { actionsRef, currentStateRef } = useDiagramsHookOption();
 
   const addSelectedEdges = useStore((ctx) => ctx.addSelectedEdges);
 
@@ -182,13 +167,8 @@ export const FlowDiagram: React.FC = () => {
 
           operator?.onAfterCreate?.({
             node: node as typeof operatorInstance,
-            currentState: latestState.current,
-            actions: {
-              updateEdge,
-              updateNode,
-              setActiveLayerId,
-              setLayer,
-            },
+            currentState: currentStateRef.current,
+            actions: actionsRef.current,
           });
         });
       }
diff --git a/packages/flow/src/Diagrams/Panels/LayerPanel/index.tsx b/packages/flow/src/Diagrams/Panels/LayerPanel/index.tsx
index 4c43317..381e764 100644
--- a/packages/flow/src/Diagrams/Panels/LayerPanel/index.tsx
+++ b/packages/flow/src/Diagrams/Panels/LayerPanel/index.tsx
@@ -1,21 +1,16 @@
 import classnames from 'classnames';
-import { useDiagramsContext } from '../../State/DiagramsProvider';
+import {
+  useDiagramsContext,
+  useDiagramsHookOption,
+} from '../../State/DiagramsProvider';
 import { Button, Input, Modal } from 'antd';
 import { type Layer } from '../../State/Layer';
 import { getOperatorFromOperatorType } from '../../Operators';
 import css from './LayerPanel.module.less';
 
 export function LayerPanel() {
-  const {
-    layer,
-    activeLayerId,
-    setActiveLayerId,
-    setLayer,
-    nodes,
-    edges,
-    updateEdge,
-    updateNode,
-  } = useDiagramsContext();
+  const { layer, activeLayerId, setActiveLayerId } = useDiagramsContext();
+  const { currentStateRef, actionsRef } = useDiagramsHookOption();
 
   function renderLayers(layers: Layer[], index: number = 0) {
     return (
@@ -74,18 +69,8 @@ export function LayerPanel() {
                 // add nodes
                 customOperator.onAfterCreate({
                   node: newNode,
-                  currentState: {
-                    layer,
-                    activeLayerId,
-                    nodes,
-                    edges,
-                  },
-                  actions: {
-                    setActiveLayerId,
-                    setLayer,
-                    updateEdge,
-                    updateNode,
-                  },
+                  currentState: currentStateRef.current,
+                  actions: actionsRef.current,
                 });
               }
             },