V10 API Example - Infinite loop ?

import ReactFlow, {
  applyNodeChanges,
  applyEdgeChanges
} from 'react-flow-renderer';

const initialNodes = [
  { id: '1', data: { label: 'Node 1' }, position: { x: 250, y: 0 } },
  { id: '2', data: { label: 'Node 2' }, position: { x: 150, y: 100 } }
];

const initialEdges = [
  { id: 'e1-2', source: '1', target: '2' }
];

const BasicFlow = () => {
  const [nodes, setNodes] = useState(initialNodes);
  const [edges, setEdges] = useState(initialEdges);

  const onNodesChange = useCallback((changes) => setNodes((ns) => applyNodeChanges(changes, ns)), []);
  const onEdgesChange = useCallback((changes) => setEdges((es) => applyEdgeChanges(changes, es)), []);

  return (
    <ReactFlow
      nodes={nodes} 
      edges={edges}
      onNodesChange={onNodesChange}
      onEdgesChange={onEdgesChange}
    />
  );
};

export default BasicFlow;

Using: react-flow-renderer@10.0.0-next.28

It appears that once

nodeTypes = { { } }

is added to the API example that, there is a pretty serious loop occuring ? am I missing something. applyNodeChanges is triggering onNodesChange which is then calling the callback and on and on etc.

[rithvikvibhu]

Thanks @moklick I did search the issues the day before this issue was created, that’s a real coincidence :p Anyway, just wanted to say that memoizing outside the function worked. I see the PR description has also been updated, cheers!

[moklick]

Good point. I will add it to the docs. We are not memoizing node types anymore. If your node types were dynamic you had to use a hacky API to update them in v9. In v10 it behaves like all other props too. You need to take care that you don’t create a new nodeTypes object on every render. If you use useMemo or define the nodeTypes outside of the component this issue shouldn’t occur. Does this solve your issue?