So I have a mounted React application that is rendered like this (it's via another framework on top):

const componentRender = (entryComponent, initialProps, targetNode) => {
 const root = createRoot(targetNode);
 const element = createElement(entryComponent, initialProps);
  const wrapper = createElement(SomeWrapper, null, element);
  root.render(wrapper);
}

On top level, I call:

Ext.extend(Ext.Container, {
  listeners: {
    afterrender: function () {
     this.root = componentRender(
        MyComponent,
        this.myProps,
        domElement
      );
    },
  },
 constructor: function (...args) {
    Object.assign(this, args);
  },
onServerSuccess: function(data) {
// here is where I receive new data 
    this.myProps = data;
}
});

In essence, when the EXT component loads, I insert React into the page. So what I can do is onServerSuccess (when I receive the data I want), I can use this.root.unmount() and mount the component again. However, mounting and unmounting repeatedly is not really the best solution. What I'm trying to do is perhaps to make this.myProps "reactive" so whenever they change, the component knows and re-renders without having to be unmounted and re-mounted again.

Maybe there's a better solution out there?