refactor(markers): cleanup

packages/react/src/container/EdgeRenderer/MarkerDefinitions.tsx

@@ -51,17 +51,22 @@ 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(
+  const markers = useStore(useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]), markersEqual);
-    useCallback(markerSelector({ defaultColor, rfId }), [defaultColor, rfId]),
+
-    // the id includes all marker options, so we just need to look at that part of the marker
+  if (!markers.length) {
-    (a, b) => !(a.length !== b.length || a.some((m, i) => m.id !== b[i].id))
+    return null;
-  );
+  }
 
   return (
+    <svg className="react-flow__marker">
       <defs>
         {markers.map((marker: MarkerProps) => (
           <Marker
@@ -77,6 +82,7 @@ const MarkerDefinitions = ({ defaultColor, rfId }: MarkerDefinitionsProps) => {
           />
         ))}
       </defs>
+    </svg>
   );
 };
 

packages/react/src/container/EdgeRenderer/index.tsx

@@ -28,7 +28,6 @@ type EdgeRendererProps = Pick<
   | 'disableKeyboardA11y'
   | 'edgeTypes'
 > & {
-  elevateEdgesOnSelect: boolean;
   children: ReactNode;
 };
 
@@ -66,9 +65,7 @@ const EdgeRenderer = ({
 
   return (
     <div className="react-flow__edges">
-      <svg className="react-flow__marker">
       <MarkerDefinitions defaultColor={defaultMarkerColor} rfId={rfId} />
-      </svg>
 
       {edgeIds.map((id) => {
         return (