diff --git a/.changeset/sweet-terms-exist.md b/.changeset/sweet-terms-exist.md new file mode 100644 index 0000000000..d0603e327a --- /dev/null +++ b/.changeset/sweet-terms-exist.md @@ -0,0 +1,5 @@ +--- +'@xyflow/react': patch +--- + +Use `useEffect` for StoreUpdater to restore previous behaviour diff --git a/packages/react/src/components/StoreUpdater/index.tsx b/packages/react/src/components/StoreUpdater/index.tsx index a22895a418..223e62bc27 100644 --- a/packages/react/src/components/StoreUpdater/index.tsx +++ b/packages/react/src/components/StoreUpdater/index.tsx @@ -3,11 +3,10 @@ * We distinguish between values we can update directly with `useDirectStoreUpdater` (like `snapGrid`) * and values that have a dedicated setter function in the store (like `setNodes`). */ -import { useRef } from 'react'; +import { useEffect, useRef } from 'react'; import { shallow } from 'zustand/shallow'; import { infiniteExtent, type CoordinateExtent, mergeAriaLabelConfig, AriaLabelConfig } from '@xyflow/system'; -import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect'; import { useStore, useStoreApi } from '../../hooks/useStore'; import type { Node, Edge, ReactFlowState, ReactFlowProps, FitViewOptions } from '../../types'; import { defaultNodeOrigin } from '../../container/ReactFlow/init-values'; @@ -126,12 +125,7 @@ export function StoreUpdater(); - // We use layout effects here so that the store is always populated before - // any child useEffect or useLayoutEffect fires. With regular useEffect, the - // cleanup calls reset() which empties the store, and child effects can run - // before the new mount effect repopulates it — causing children to read - // empty nodeLookup/nodes/edges during a remount. - useIsomorphicLayoutEffect(() => { + useEffect(() => { setDefaultNodesAndEdges(props.defaultNodes, props.defaultEdges); return () => { @@ -143,7 +137,7 @@ export function StoreUpdater>>(initPrevValues); - useIsomorphicLayoutEffect( + useEffect( () => { for (const fieldName of fieldsToTrack) { const fieldValue = props[fieldName];