Onchange function getting triggered on each and every component render

Hey, I am using react excalidraw package. I am trying to do collaboration feature for 2 people. Both the people will share the below component. Let’s say person A and person B. If person A changes anything in the whiteboard, it will inturn trigger onChange function, which will send data over socket and will be recieved by person B in the useEffect where I am calling updateScene API. The only problem is I am running into infinite loop because onChange function is getting triggered by itself on each and every component render. Am I missing something?

This is what my component returns :

  return (
<Excalidraw
          ref={props.innerChildRef}
          width={width}
          height={height}
          initialData={InitialData}
          onChange={onChange}
        />
)

This is the onChange function :

const onChange = (elements, state) => {
    console.log("onChange:::::::::::::::::::::::::::::::::::: :", props.role, elements, "State : ", state);
    props.sendWhiteboardSocket(elements)
  };
  

This is my useEffect for updating elements upon receiving elements prop :

useEffect(() => {
  if (props.elements && props.innerChildRef && props.innerChildRef.current) {
    let newElements = reconcileElements(props.elements)
    let sceneData = {"elements" : newElements}
    props.innerChildRef.current.updateScene(sceneData);
  }
}, [props.elements, props.innerChildRef]);

[ad1992]

@CV1928 yes currently onChange gets triggered everytime comp updates but this shouldn’t happen. Will make the change so that it gets called only on elements or appState change. As a workaround, you can cache the version you get using getSceneVersion and check if the version has changed and perform the actions accordingly

[ad1992]

Completely optimizing onChange would take some time as we need to figure out what all cases we need not call onChange callback. But we will roll out the optimization in patches very soon. Since you are maintaining multiple instances of Excal so you would be having some kind of mapping among the instances right so you can use that to maintain version cache mapping in memory ?