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) => {

packages/react/src/hooks/useConnection.ts

@@ -13,6 +13,7 @@ const selector = (s: ReactFlowStore) => ({
 /**
  * Hook for accessing the ongoing connection.
  *
+ * @public
  * @returns ongoing connection: startHandle, endHandle, status, position
  */
 export function useConnection(): {

packages/react/src/hooks/useNodesEdgesState.ts

@@ -1,34 +1,8 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { useState, useCallback, type SetStateAction, type Dispatch } from 'react';
+import { useState, useCallback, type Dispatch, type SetStateAction } from 'react';
 
 import { applyNodeChanges, applyEdgeChanges } from '../utils/changes';
 import type { Node, NodeChange, Edge, EdgeChange } from '../types';
 
-type ApplyChanges<ItemType, ChangesType> = (changes: ChangesType[], items: ItemType[]) => ItemType[];
-type OnChange<ChangesType> = (changes: ChangesType[]) => void;
-
-function createUseItemsState(
-  applyChanges: ApplyChanges<Node, NodeChange>
-): <NodeType extends Node = Node>(
-  initialItems: NodeType[]
-) => [NodeType[], Dispatch<SetStateAction<NodeType[]>>, OnChange<NodeChange>];
-function createUseItemsState(
-  applyChanges: ApplyChanges<Edge, EdgeChange>
-): <EdgeType extends Edge = Edge>(
-  initialItems: EdgeType[]
-) => [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, OnChange<EdgeChange>];
-function createUseItemsState(
-  applyChanges: ApplyChanges<any, any>
-): (initialItems: any[]) => [any[], Dispatch<SetStateAction<any[]>>, OnChange<any>] {
-  return (initialItems: any[]) => {
-    const [items, setItems] = useState(initialItems);
-
-    const onItemsChange = useCallback((changes: any[]) => setItems((items: any) => applyChanges(changes, items)), []);
-
-    return [items, setItems, onItemsChange];
-  };
-}
-
 /**
  * Hook for managing the state of nodes - should only be used for prototyping / simple use cases.
  *
@@ -36,7 +10,14 @@ function createUseItemsState(
  * @param initialNodes
  * @returns an array [nodes, setNodes, onNodesChange]
  */
-export const useNodesState = createUseItemsState(applyNodeChanges);
+export function useNodesState<NodeType extends Node = Node>(
+  initialNodes: NodeType[]
+): [NodeType[], Dispatch<SetStateAction<NodeType[]>>, (changes: NodeChange[]) => void] {
+  const [nodes, setNodes] = useState(initialNodes);
+  const onNodesChange = useCallback((changes: NodeChange[]) => setNodes((nds) => applyNodeChanges(changes, nds)), []);
+
+  return [nodes, setNodes, onNodesChange];
+}
 
 /**
  * Hook for managing the state of edges - should only be used for prototyping / simple use cases.
@@ -45,4 +26,11 @@ export const useNodesState = createUseItemsState(applyNodeChanges);
  * @param initialEdges
  * @returns an array [edges, setEdges, onEdgesChange]
  */
-export const useEdgesState = createUseItemsState(applyEdgeChanges);
+export function useEdgesState<EdgeType extends Edge = Edge>(
+  initialEdges: EdgeType[]
+): [EdgeType[], Dispatch<SetStateAction<EdgeType[]>>, (changes: EdgeChange[]) => void] {
+  const [edges, setEdges] = useState(initialEdges);
+  const onEdgesChange = useCallback((changes: EdgeChange[]) => setEdges((eds) => applyEdgeChanges(changes, eds)), []);
+
+  return [edges, setEdges, onEdgesChange];
+}