From c1beb6b58a4388b93187f434a730429847f8b19c Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 20 Feb 2024 16:14:39 +0100
Subject: [PATCH] chore(react): use useIsomorphicLayoutEffect hook to prevent
 SSR warning

---
 packages/react/src/hooks/useIsomorphicLayoutEffect.ts | 4 ++++
 packages/react/src/hooks/useReactFlow.ts              | 5 +++--
 2 files changed, 7 insertions(+), 2 deletions(-)
 create mode 100644 packages/react/src/hooks/useIsomorphicLayoutEffect.ts

diff --git a/packages/react/src/hooks/useIsomorphicLayoutEffect.ts b/packages/react/src/hooks/useIsomorphicLayoutEffect.ts
new file mode 100644
index 00000000..be54c9fe
--- /dev/null
+++ b/packages/react/src/hooks/useIsomorphicLayoutEffect.ts
@@ -0,0 +1,4 @@
+import { useEffect, useLayoutEffect } from 'react';
+
+// we need this hook to prevent a warning when using react-flow in SSR
+export const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
diff --git a/packages/react/src/hooks/useReactFlow.ts b/packages/react/src/hooks/useReactFlow.ts
index 02080731..5fd605fd 100644
--- a/packages/react/src/hooks/useReactFlow.ts
+++ b/packages/react/src/hooks/useReactFlow.ts
@@ -1,10 +1,11 @@
-import { useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useMemo, useRef, useState } from 'react';
 import { getElementsToRemove, getOverlappingArea, isRectObject, nodeToRect, type Rect } from '@xyflow/system';
 
 import useViewportHelper from './useViewportHelper';
 import { useStoreApi } from './useStore';
 import type { ReactFlowInstance, Instance, Node, Edge } from '../types';
 import { getElementsDiffChanges, isNode } from '../utils';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
 
 /**
  * Hook for accessing the ReactFlow instance.
@@ -54,7 +55,7 @@ export function useReactFlow<NodeType extends Node = Node, EdgeType extends Edge
   // Layout effects are guaranteed to run before the next render which means we
   // shouldn't run into any issues with stale state or weird issues that come from
   // rendering things one frame later than expected (we used to use `setTimeout`).
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     // Because we need to flip the state back to false after flushing, this should
     // trigger the hook again (!). If the hook is being run again we know that any
     // updates should have been processed by now and we can safely clear the queue