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

src/container/ReactFlow/index.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import cc from 'classcat';
 
 import GraphView from '../GraphView';
@@ -13,10 +13,19 @@ import Attribution from '../../components/Attribution';
 import { createEdgeTypes } from '../EdgeRenderer/utils';
 import Wrapper from './Wrapper';
 
-import { ConnectionMode, ConnectionLineType, PanOnScrollMode, ReactFlowProps, ReactFlowRefType } from '../../types';
+import {
+  ConnectionMode,
+  ConnectionLineType,
+  PanOnScrollMode,
+  ReactFlowProps,
+  ReactFlowRefType,
+  NodeTypes,
+  EdgeTypes,
+} from '../../types';
 
 import '../../style.css';
 import '../../theme-default.css';
+import { useNodeOrEdgeTypes } from './utils';
 
 const defaultNodeTypes = {
   input: InputNode,
@@ -127,8 +136,8 @@ const ReactFlow = forwardRef<ReactFlowRefType, ReactFlowProps>(
     },
     ref
   ) => {
-    const nodeTypesParsed = useMemo(() => createNodeTypes(nodeTypes), [nodeTypes]);
-    const edgeTypesParsed = useMemo(() => createEdgeTypes(edgeTypes), [edgeTypes]);
+    const nodeTypesParsed = useNodeOrEdgeTypes(nodeTypes, createNodeTypes) as NodeTypes;
+    const edgeTypesParsed = useNodeOrEdgeTypes(edgeTypes, createEdgeTypes) as EdgeTypes;
     const reactFlowClasses = cc(['react-flow', className]);
 
     return (

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;
+}