diff --git a/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx b/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
index 8a0524ac..a4696e5b 100644
--- a/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
+++ b/packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx
@@ -51,32 +51,38 @@ const markerSelector =
return markers;
};
+const markersEqual = (a: MarkerProps[], b: MarkerProps[]) =>
+ // the id includes all marker options, so we just need to look at that part of the marker
+ !(a.length !== b.length || a.some((m, i) => m.id !== b[i].id));
+
// when you have multiple flows on a page and you hide the first one, the other ones have no markers anymore
// when they do have markers with the same ids. To prevent this the user can pass a unique id to the react flow wrapper
// that we can then use for creating our unique marker ids
const MarkerDefinitions = ({ defaultColor, rfId }: MarkerDefinitionsProps) => {
- const markers = useStore(
- useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]),
- // the id includes all marker options, so we just need to look at that part of the marker
- (a, b) => !(a.length !== b.length || a.some((m, i) => m.id !== b[i].id))
- );
+ const markers = useStore(useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]), markersEqual);
+
+ if (!markers.length) {
+ return null;
+ }
return (
-