chore(react): simplify useEdgesState/useNodesState

examples/react/src/examples/CustomMiniMapNode/index.tsx

@@ -32,8 +32,8 @@ const CustomMiniMapNode = ({ x, y, width, height, color }: MiniMapNodeProps) =>
 );
 
 const CustomMiniMapNodeFlow = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   const onConnect = useCallback((params: Connection | Edge) => setEdges((els) => addEdge(params, els)), [setEdges]);
   const addRandomNode = () => {

examples/react/src/examples/CustomNode/index.tsx

@@ -12,6 +12,7 @@ import {
   useNodesState,
   useEdgesState,
   Background,
+  Edge,
 } from '@xyflow/react';
 
 import ColorSelectorNode from './ColorSelectorNode';
@@ -33,8 +34,8 @@ const nodeTypes = {
 };
 
 const CustomNodeFlow = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   const [bgColor, setBgColor] = useState<string>(initBgColor);
 

examples/react/src/examples/DragNDrop/index.tsx

@@ -39,7 +39,7 @@ const nodeOrigin: NodeOrigin = [0.5, 0.5];
 const DnDFlow = () => {
   const [reactFlowInstance, setReactFlowInstance] = useState<ReactFlowInstance>();
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   const onConnect = (params: Connection | Edge) => setEdges((eds) => addEdge(params, eds));
   const onInit = (rfi: ReactFlowInstance) => setReactFlowInstance(rfi);

examples/react/src/examples/Empty/index.tsx

@@ -26,8 +26,8 @@ const buttonStyle: CSSProperties = {
 };
 
 const EmptyFlow = () => {
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   const onConnect = useCallback((params: Connection | Edge) => setEdges((els) => addEdge(params, els)), [setEdges]);
   const addRandomNode = () => {

examples/react/src/examples/NodeTypesObjectChange/index.tsx

@@ -66,7 +66,7 @@ const nodeTypesObjects: NodeTypesObject = {
 const NodeTypeChangeFlow = () => {
   const [nodeTypesId, setNodeTypesId] = useState<string>('a');
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const onConnect = useCallback((params: Connection | Edge) => setEdges((eds) => addEdge(params, eds)), [setEdges]);
   const changeType = () => setNodeTypesId((nt) => (nt === 'a' ? 'b' : 'a'));
 

examples/react/src/examples/UseUpdateNodeInternals/index.tsx

@@ -33,7 +33,7 @@ const getId = (): string => `${id++}`;
 
 const UpdateNodeInternalsFlow = () => {
   const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
   const onConnect = useCallback((params: Edge | Connection) => setEdges((els) => addEdge(params, els)), [setEdges]);
 
   const { screenToFlowPosition } = useReactFlow();

examples/react/src/examples/Validation/index.tsx

@@ -55,7 +55,7 @@ const nodeTypes: NodeTypes = {
 const ValidationFlow = () => {
   const [value, setValue] = useState(0);
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   const onConnectStart: OnConnectStart = useCallback(
     (event, params) => {