message: refactor(bg): dont use math random for pattern id generation closes
diff: -import React, { memo, useMemo, FC } from 'react';
  +import React, { memo, FC, useEffect, useState, useRef } from 'react';
  import cc from 'classcat';
  import { useStore } from '../../store';
  @@ -20,9 +20,16 @@ const Background: FC<BackgroundProps> = ({
  style,
  className,
  }) => {
  + const ref = useRef<SVGSVGElement>(null);
  + const [patternId, setPatternId] = useState<string | null>(null);
  const [x, y, scale] = useStore(transformSelector);
  +
  + useEffect(() => {
  // when there are multiple flows on a page we need to make sure that every background gets its own pattern.
  - const patternId = useMemo(() => `pattern-${Math.floor(Math.random() * 100000)}`, []);
  + const bgs = document.querySelectorAll('.react-flow__background');
  + const index = Array.from(bgs).findIndex((bg) => bg === ref.current);
  + setPatternId(`pattern-${index}`);
  + }, []);
  const bgClasses = cc(['react-flow__background', 'react-flow__container', className]);
  const scaledGap = gap * scale;
  @@ -41,7 +48,10 @@ const Background: FC<BackgroundProps> = ({
  width: '100%',
  height: '100%',
  }}
  + ref={ref}
  >
  + {patternId && (
  + <>
  <pattern
  id={patternId}
  x={xOffset}
  @@ -53,6 +63,8 @@ const Background: FC<BackgroundProps> = ({
  {path}
  </pattern>
  <rect x="0" y="0" width="100%" height="100%" fill={`url(#${patternId})`} />
  + </>
  + )}
  </svg>
  );
  };
  