refactor(react): cleanup provider

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

@@ -1,22 +1,10 @@
-import { useRef, type ReactNode } from 'react';
-import { type StoreApi } from 'zustand';
-import { UseBoundStoreWithEqualityFn } from 'zustand/traditional';
+import { useState, type ReactNode } from 'react';
 
-import { Provider } from '../../contexts/RFStoreContext';
-import { createRFStore } from '../../store';
-import type { ReactFlowState, Node, Edge } from '../../types';
+import { Provider } from '../../contexts/StoreContext';
+import { createStore } from '../../store';
+import type { Node, Edge } from '../../types';
 
-export function ReactFlowProvider({
-  children,
-  initialNodes,
-  initialEdges,
-  defaultNodes,
-  defaultEdges,
-  initialWidth,
-  initialHeight,
-  fitView,
-}: {
-  children: ReactNode;
+export type ReactFlowProviderProps = {
   initialNodes?: Node[];
   initialEdges?: Edge[];
   defaultNodes?: Node[];
@@ -24,19 +12,30 @@ export function ReactFlowProvider({
   initialWidth?: number;
   initialHeight?: number;
   fitView?: boolean;
-}) {
-  const storeRef = useRef<UseBoundStoreWithEqualityFn<StoreApi<ReactFlowState>> | null>(null);
-  if (!storeRef.current) {
-    storeRef.current = createRFStore({
-      nodes: initialNodes,
-      edges: initialEdges,
+  children: ReactNode;
+};
+
+export function ReactFlowProvider({
+  initialNodes: nodes,
+  initialEdges: edges,
+  defaultNodes,
+  defaultEdges,
+  initialWidth: width,
+  initialHeight: height,
+  fitView,
+  children,
+}: ReactFlowProviderProps) {
+  const [store] = useState(() =>
+    createStore({
+      nodes,
+      edges,
       defaultNodes,
       defaultEdges,
-      width: initialWidth,
-      height: initialHeight,
+      width,
+      height,
       fitView,
-    });
-  }
+    })
+  );
 
-  return <Provider value={storeRef.current}>{children}</Provider>;
+  return <Provider value={store}>{children}</Provider>;
 }

packages/react/src/container/ReactFlow/Wrapper.tsx

@@ -1,6 +1,6 @@
 import { useContext, type ReactNode } from 'react';
 
-import StoreContext from '../../contexts/RFStoreContext';
+import StoreContext from '../../contexts/StoreContext';
 import { ReactFlowProvider } from '../../components/ReactFlowProvider';
 import type { Node, Edge } from '../../types';
 

packages/react/src/contexts/RFStoreContext.ts

@@ -1,8 +0,0 @@
-import { createContext } from 'react';
-
-import { createRFStore } from '../store';
-
-const StoreContext = createContext<ReturnType<typeof createRFStore> | null>(null);
-
-export const Provider = StoreContext.Provider;
-export default StoreContext;

packages/react/src/contexts/StoreContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+
+import { createStore } from '../store';
+
+const StoreContext = createContext<ReturnType<typeof createStore> | null>(null);
+
+export const Provider = StoreContext.Provider;
+export default StoreContext;

packages/react/src/hooks/useStore.ts

@@ -1,10 +1,10 @@
 import { useContext, useMemo } from 'react';
 import { UseBoundStoreWithEqualityFn, useStoreWithEqualityFn as useZustandStore } from 'zustand/traditional';
+import { StoreApi } from 'zustand';
 import { errorMessages } from '@xyflow/system';
 
-import StoreContext from '../contexts/RFStoreContext';
+import StoreContext from '../contexts/StoreContext';
 import type { Edge, Node, ReactFlowState } from '../types';
-import { StoreApi } from 'zustand';
 
 const zustandErrorMessage = errorMessages['error001']();
 
@@ -47,7 +47,6 @@ function useStoreApi<NodeType extends Node = Node, EdgeType extends Edge = Edge>
       getState: store.getState,
       setState: store.setState,
       subscribe: store.subscribe,
-      destroy: store.destroy,
     }),
     [store]
   );

packages/react/src/store/index.ts

@@ -18,7 +18,7 @@ import { applyEdgeChanges, applyNodeChanges, createSelectionChange, getSelection
 import getInitialState from './initialState';
 import type { ReactFlowState, Node, Edge, UnselectNodesAndEdgesParams, FitViewOptions } from '../types';
 
-const createRFStore = ({
+const createStore = ({
   nodes,
   edges,
   defaultNodes,
@@ -329,4 +329,4 @@ const createRFStore = ({
     Object.is
   );
 
-export { createRFStore };
+export { createStore };