feat(hooks): add useNodesState and useEdgesState

example/src/FloatingEdges/index.tsx

@@ -1,17 +1,13 @@
-import { useState, useCallback } from 'react';
+import { useCallback } from 'react';
 
 import ReactFlow, {
   addEdge,
   Background,
   OnLoadParams,
   EdgeTypesType,
-  Node,
   Connection,
-  Edge,
-  applyNodeChanges,
-  applyEdgeChanges,
-  NodeChange,
-  EdgeChange,
+  useNodesState,
+  useEdgesState,
 } from 'react-flow-renderer';
 
 import './style.css';
@@ -29,21 +25,13 @@ const edgeTypes: EdgeTypesType = {
 };
 
 const FloatingEdges = () => {
-  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));
   }, []);
 
-  const onNodesChange = useCallback((changes: NodeChange[]) => {
-    setNodes((ns) => applyNodeChanges(changes, ns));
-  }, []);
-
-  const onEdgesChange = useCallback((changes: EdgeChange[]) => {
-    setEdges((es) => applyEdgeChanges(changes, es));
-  }, []);
-
   return (
     <div className="floatingedges">
       <ReactFlow