refactor(nodeTypes/edgeTypes): show warning when not memoized closes #1620

src/container/ReactFlow/utils.ts

@@ -0,0 +1,28 @@
+import { useMemo, useRef } from 'react';
+import shallow from 'zustand/shallow';
+
+import { EdgeTypes, NodeTypes } from '../../types';
+import { CreateEdgeTypes } from '../EdgeRenderer/utils';
+import { CreateNodeTypes } from '../NodeRenderer/utils';
+
+export function useNodeOrEdgeTypes(nodeOrEdgeTypes: NodeTypes, createTypes: CreateNodeTypes): NodeTypes;
+export function useNodeOrEdgeTypes(nodeOrEdgeTypes: EdgeTypes, createTypes: CreateEdgeTypes): EdgeTypes;
+export function useNodeOrEdgeTypes(nodeOrEdgeTypes: any, createTypes: any): any {
+  const typesKeysRef = useRef<string[] | null>(null);
+
+  const typesParsed = useMemo(() => {
+    if (process.env.NODE_ENV === 'development') {
+      const typeKeys = Object.keys(nodeOrEdgeTypes);
+      if (shallow(typesKeysRef.current, typeKeys)) {
+        console.warn(
+          "React Flow: It looks like that you created a new nodeTypes or edgeTypes object. If this wasn't on purpose please define the nodeTypes/edgeTypes outside of the component or memoize them."
+        );
+      }
+
+      typesKeysRef.current = typeKeys;
+    }
+    return createTypes(nodeOrEdgeTypes);
+  }, [nodeOrEdgeTypes]);
+
+  return typesParsed;
+}