Hello,
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);
}
}, [])
console.log(skipsDiagramUpdate);
return useMemo(() => (
<ReactDiagram
ref={schemaRef}
divClassName='schema-component'
style={schemaStyle}
initDiagram={() => initDiagram(autoLayout, setSkipsDiagramUpdate)}
nodeDataArray={nodeDataArray}
linkDataArray={linkDataArray}
modelData={modelData}
onModelChange={onModelChange}
skipsDiagramUpdate={skipsDiagramUpdate}
/>
), [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 )
