chore(BatchProvider): cleanup

packages/react/src/components/BatchProvider/index.tsx

@@ -8,10 +8,18 @@ import type { Edge, Node } from '../../types';
 import { useQueue } from './useQueue';
 
 const BatchContext = createContext<{
-  nodeQueue: Queue<Node>;
-  edgeQueue: Queue<Edge>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  nodeQueue: Queue<any>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  edgeQueue: Queue<any>;
 } | null>(null);
 
+/**
+ * This is a context provider that holds and processes the node and edge update queues
+ * that are needed to handle setNodes, addNodes, setEdges and addEdges.
+ *
+ * @internal
+ */
 export function BatchProvider<NodeType extends Node = Node, EdgeType extends Edge = Edge>({
   children,
 }: {

packages/react/src/components/BatchProvider/useQueue.ts

@@ -1,8 +1,16 @@
 import { useState } from 'react';
-import { createQueue } from './utils';
-import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
-import { QueueItem } from './types';
 
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect';
+import { Queue, QueueItem } from './types';
+
+/**
+ * This hook returns a queue that can be used to batch updates.
+ *
+ * @param runQueue - a function that gets called when the queue is flushed
+ * @internal
+ *
+ * @returns a Queue object
+ */
 export function useQueue<T>(runQueue: (items: QueueItem<T>[]) => void) {
   // Because we're using a ref above, we need some way to let React know when to
   // actually process the queue. We flip this bit of state to `true` any time we
@@ -10,8 +18,8 @@ export function useQueue<T>(runQueue: (items: QueueItem<T>[]) => void) {
   const [shouldFlush, setShouldFlush] = useState(false);
 
   // A reference of all the batched updates to process before the next render. We
-  // want a mutable reference here so multiple synchronous calls to `setNodes` etc
-  // can be batched together.
+  // want a reference here so multiple synchronous calls to `setNodes` etc can be
+  // batched together.
   const [queue] = useState(() => createQueue<T>(() => setShouldFlush(true)));
 
   // Layout effects are guaranteed to run before the next render which means we
@@ -30,7 +38,7 @@ export function useQueue<T>(runQueue: (items: QueueItem<T>[]) => void) {
     const queueItems = queue.get();
 
     if (queueItems.length) {
-      runQueue?.(queueItems);
+      runQueue(queueItems);
 
       queue.reset();
     }
@@ -42,3 +50,18 @@ export function useQueue<T>(runQueue: (items: QueueItem<T>[]) => void) {
 
   return queue;
 }
+
+function createQueue<T>(cb: () => void): Queue<T> {
+  let queue: QueueItem<T>[] = [];
+
+  return {
+    get: () => queue,
+    reset: () => {
+      queue = [];
+    },
+    push: (item) => {
+      queue.push(item);
+      cb();
+    },
+  };
+}