feat(hooks): add useNodesState and useEdgesState

example/src/NestedNodes/index.tsx

@@ -3,14 +3,12 @@ import { useState, MouseEvent, useCallback } from 'react';
 import ReactFlow, {
   addEdge,
   Background,
-  applyNodeChanges,
-  applyEdgeChanges,
+  useNodesState,
+  useEdgesState,
   MiniMap,
   Controls,
   Node,
   Edge,
-  NodeChange,
-  EdgeChange,
   OnLoadParams,
   Connection,
 } from 'react-flow-renderer';
@@ -87,8 +85,8 @@ const initialEdges: Edge[] = [
 
 const NestedFlow = () => {
   const [rfInstance, setRfInstance] = useState<OnLoadParams | null>(null);
-  const [nodes, setNodes] = useState<Node[]>(initialNodes);
-  const [edges, setEdges] = useState<Edge[]>(initialEdges);
+  const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges);
 
   const onConnect = useCallback((connection: Connection) => {
     setEdges((eds) => addEdge(connection, eds));
@@ -129,14 +127,6 @@ const NestedFlow = () => {
     });
   };
 
-  const onNodesChange = useCallback((changes: NodeChange[]) => {
-    setNodes((ns) => applyNodeChanges(changes, ns));
-  }, []);
-
-  const onEdgesChange = useCallback((changes: EdgeChange[]) => {
-    setEdges((es) => applyEdgeChanges(changes, es));
-  }, []);
-
   return (
     <ReactFlow
       nodes={nodes}