Search code examples
javascriptangularjsreactjsngreact

ng-react much slower than ng-repeat (deprecated access to property 'nodeType' error)

I am trying to use ngReact instead of ngRepeat to improve performance when I modify my $watched array of objects.

The react component works, and the html is displayed correctly. For each marker contained in the controller, I want to create a <button>, with the marker.title as text.

However it's super slow, much slower than ngRepeat, and the console shows an infinite list of the same error:

[Error] Deprecated attempt to access property 'nodeType' on a non-Node object.
    n (angular.min.js, line 7)
    sa (angular.min.js, line 11)
    $digest (angular.min.js, line 129)
    $apply (angular.min.js, line 132)
    l (angular.min.js, line 85)
    O (angular.min.js, line 89)
    (funzione anonima) (angular.min.js, line 90)
    m (angular.min.js, line 89)

Here it is my React component (at the end of my post, there is the JSfiddle link)

HTML

<!-- ctrl is the controller, having a list of markers -->
<poi-list list="ctrl.getMarkers()" ctrl="ctrl"/>

JS

.value( "PoiList", React.createClass( {

  propTypes : {

    list: React.PropTypes.object.isRequired,
    ctrl: React.PropTypes.object.isRequired
  },

  render: function() 
   {
    var ctrl = this.props.ctrl; // directive's Controller

    var markers = this.props.list.map( function( marker, i ) 
        {//for each marker, create a button
         return React.DOM.button(  {
                                    className:'btn btn-default',
                                    onClick: function(){ctrl.doSomething(marker);},
                                    onMouseOver: function(){ctrl.doSomethingElse(marker);},                               
                                   }, marker.title
                                 ) ; 
        } );
    return React.DOM.div(null, markers);
    }


}))

.directive( 'poiList', function( reactDirective ) {
  return reactDirective( 'PoiList' );
} );

this is a (new version) JSFiddle of my problem. A brief description: - there is a MapBox directive, to show the map on the page. After 1s, it loads 3 markers on the map, to simulate an ajax request. - for each marker loaded, it will pushed in a list of the PanelController which is responsible to show the names of the markers on a left panel. The names are shown by a React component, using ng-React. It works, however there is that error that slows down the whole system. console error

Any idea of what can be the problem? thank you

Solution

  • Thanks to the comments to my question, I figured out that the real problem is not the deprecated error shown by the Safari console, but it's a problem about the recursive $digest cycle. Using Chrome, the correct error is shown. However I have not yet fixed the issue, so I posted a new question here . Thank you