React Functional going infinite loop


I need to move to functionnal components, so I managed to change most of my code but I am in front of a problem, an infinite loop is generated and I don’t know why

interface SchemaProps {
  autoLayout: boolean
  linkDataArray: Array<go.ObjectData>;
  nodeDataArray: Array<go.ObjectData>;
  modelData: go.ObjectData;
  schemaRef: React.RefObject<ReactDiagram>;
  skipsDiagramUpdate: boolean;
  setSkipsDiagramUpdate: Dispatch<SetStateAction<boolean>>
  onDiagramEvent: (e: go.DiagramEvent) => void;
  onModelChange: (e: go.IncrementalData) => void;

const SchemaWrapper: FC<SchemaProps> = (props) => {
  const schemaStyle = { backgroundColor: '#eee' };
  const { autoLayout, linkDataArray, nodeDataArray, modelData, schemaRef, skipsDiagramUpdate, setSkipsDiagramUpdate, onDiagramEvent, onModelChange } = props;

   * Get the schema reference and add any desired schema listeners.
   * Typically the same function will be used for each listener, with the function using a switch statement to handle the events.
  useEffect(() => {
    if (!schemaRef.current) return;
    const schema = schemaRef.current.getDiagram();
    if (!(schema instanceof go.Diagram)) return;
    schema.addDiagramListener('ChangedSelection', onDiagramEvent);

     * Get the schema reference and remove listeners that were added during mounting.
    return () => {
      if (!schemaRef.current) return;
      const schema = schemaRef.current.getDiagram();
      if (!(schema instanceof go.Diagram)) return;
      schema.removeDiagramListener('ChangedSelection', onDiagramEvent);
  }, [])


  return useMemo(() => (
      initDiagram={() => initDiagram(autoLayout, setSkipsDiagramUpdate)}
  ), [nodeDataArray, linkDataArray, modelData, skipsDiagramUpdate]);


The class component was near the same as DiagramWrapper.tsx gojs-react-basic

Note that if I remove nodeDataArray and linkDataArray from the useMemo, the infinite loop is no more exsisting
Also I take a look on what changes triggers this and the only edited data where the __gohashid (I captured the objects in the handleModelChange function (functionnal version of Schema.tsx gojs-react-basic )

It’s odd that you are calling useMemo.

Have you looked at our other samples? GitHub - NorthwoodsSoftware/gojs-react-samples: A handful of projects demonstrating usage of GoJS and React together

I agree… I tried to make it without but having the same infinite loop issue…

Yes but nothing really hepls me for now

If you look at the stack can you figure what is really causing the infinite loop?

Might you need to set skipsDiagramUpdate appropriately?

I don’t know I ended up by restarting from gojs-react-samples/gojs-react-overview-palette-diagram at main · NorthwoodsSoftware/gojs-react-samples ( and it’s working now
No clue about what happened :/