How to update a component from outside in React.js? Or how to bind React components and Angular directives?

Question

JavaScript

I wrote an application in Angular 1.x The application is large and soon the brakes became noticeable, optimization partially improved the situation, but not enough. I want to transfer the heaviest things to React, I don’t want to completely rewrite the application to React (too large)
How to re-render (from the Angular directive) a React component when updating the scope?
Angular directive code:

class IstManagerListRowDirectiveClass extends IstDirectiveClass {
        constructor() {
            this.restrict = "E";
            this.scope = false;
            this.uid = null;
            super.constructor();
        } 
        unboundLink(scope, element, attr) {
            /*this.watchCollection - обертка над scope.$watchCollection()*/
            this.watchCollection("uid", (newUid, oldUid) => {
                if(angular.isNumber(newUid) || angular.isString(newUid)){
                    this.uid = newUid;
                    const ReactElement = (<IstManagerListRowComponent managerUid = {this.uid}></IstManagerListRowComponent>);
                    ReactDOM.render(ReactElement, element[0]);
                } else {
                    console.error("Класс: '"+this.constructor.name+"'; uid должен быть строкой или числом");
                }  
            }); 
        } 
        static createInstance() { 
            IstManagerListRowDirectiveClass.instance = new IstManagerListRowDirectiveClass();
            return IstManagerListRowDirectiveClass.instance;
        }
    };
    app.directive("istManagerListRow", IstManagerListRowDirectiveClass.createInstance);

React component code:

class IstManagerListRowComponent extends React.Component{
        constructor(data){
            super.constructor(data);
            this.state = {
                managerUid: this.props.managerUid
            };
        }
        render() {
            return (<div className="table-row">this.state.managerUid </div>);
        }
}

Answer 1

this.watchCollection

Maybe you don't need a project? Maybe you need to rethink how you do things in Angular? For example, use immutable structures, and everything will immediately become much faster.
And here is the component's angular code :

class IstManagerListRowComponent {
    
}
export default {
    controller: IstManagerListRowComponent,
    bindings: {
         'uid': '='
    },
    template: `
        <div className="table-row">$ctrl.uid </div>
    `
}

and instead of watchers:

class IstManagerListRowComponent {
    set uid(value) {
       this._uid = value;
       // do something
    }
}

I strongly doubt that this use of react will help you in any way. If you didn’t do this inside separate directives, for example ... you would do all the components in react. and state, routing, etc. razrulivali angular - then yes, the profit would be. And so - no profit, just in addition to the overhead costs for checking angular, you have added overhead costs for checking react (between vDom and dom).