Is my React component being recreated instead of updating?

Question

I am trying to combine Angular and React.js. I have an work example project here I have seen a couple of ways to bring the Angular and React.js together. One of the methods I have seen is to create a directive and create the React component in the link function. For example in the first part of the project to generate the React version(in red) I am using

.directive('reactElementRepeater', function() {
    return {
      link: function(scope, element) {
        var update_react = function(oldVal, newVal){ //Called every time one of the two values change
          React.renderComponent(Demo_Element({
            numberOfElements: scope.myModel.numberOfElem, 
            numberInElements: scope.myModel.numberInElem
          }), element[0]);
        }
        scope.$watch('myModel.numberOfElem.length', update_react);
        scope.$watch('myModel.numberInElem', update_react);
      }
    }
  });

What I want and what should happen in a React enabled application is for something in the model to be updated, then that update is sent through React and it will alter the DOM as little as possible to reflect that change. It looks like that instead of updating a bit of the DOM this will Create a new React component each time with renderComponent.

React.renderComponent() instantiates the root component, starts the framework, and injects the markup into a raw DOM element, provided as the second argument.

Is it actually recreating the elements each time? If that is the case is there a way to alter this so that doesn't happen? Just to be clear I know about ngReact, I just want to know other ways to speed up Angular with React.

Answer 1

Yes this is fine, it's not mounting the component multiple times.

When you call React.renderComponent() the second argument is the element which react should render the component to. So react notices if you are rendering the same component to a dom element that already contains a mounted instance of the component, and does not re-mount the entire component, it just updates the properties of it instead.

You can see this in action if you make a component with componentDidMount function defined. You'll notice that componentDidMount will only execute the first time renderComponent gets called. And afterwards, subsequent calls to renderComponent on the same target dom element will not call it because the component is already mounted. Likewise getDefaultState and getDefaultProps also only get called on the first renderComponent call.

If you're asking will the render function of the component be called every time the answer is yes. But this is how react works, you want the render function to get called because props might have changed. You can block it from being called by using shouldComponentUpdate (http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate) and returning false. However react developers recommend you don't use this to block render calls unless you have specific performance problems - most of the time it should be fine to just let the render call execute as it wont cause any slow dom updates unless things have actually changed.