[Regression][Navigator] renderScene is called with every route in the routeStack after navigator.push

[chirag04]

@ericvicenti As per our discussion on irc, I think this is a bug. Not sure though.

Also to reproduce:

Just console.log in renderScene here: https://github.com/facebook/react-native/blob/master/Examples/UIExplorer/Navigator/NavigatorExample.js#L113-L114
[13:50] <Chirag> run the app. goto Navigator and click float in from right. "float in for right" will call render scene with first scene and second scene

[ericvicenti]

I will look into this.

With typical usage, this shouldn't cause any noticeable bugs. But it will affect performance as you accumulate a lot of scenes and re-render all of them frequently.

[chirag04]

Yup. I expect to have about 50 routes also if the user keeps using the app without going back.

Thanks

[ericvicenti]

I cannot reproduce this issue on the GitHub master. I added the following line to NavigatorExample.js:114:

console.log('Rendering scene: ', route.message || route.id)

"Rendering scene: First Scene" only appears once, even as I push on more scenes by tapping "Push from right"

[chirag04]

Ok I can confirm updating to latest master, UIExplorer works fine. RenderScene is called once. I updated react-native in my app also and it seems to call renderScene once only now.

Not sure what changed here. Closing it for now.

[ericvicenti]

Thanks, I'm glad it seems to be fixed!

[aksonov]

I see this issue with latest UIExplorer. I've just added console.log("RENDER SCENE!" ) to renderScene method and got two calls:

  renderScene: function(route, nav) {
    console.log("RENDER SCENE!");
    switch (route.id) {
      case 'navbar':
        return <NavigationBarSample navigator={nav} />;
      case 'breadcrumbs':
        return <BreadcrumbNavSample navigator={nav} />;
      case 'jumping':
        return <JumpingNavSample navigator={nav} />;
      default:
        return (
          <NavMenu
            message={route.message}
            navigator={nav}
            onExampleExit={this.props.onExampleExit}
          />
        );
    }
  },

Log:

2015-08-25 11:39:46.828 [info][tid:com.facebook.React.JavaScript] 'Running application "TestApp" with appParams: {"rootTag":1,"initialProps":{}}. __DEV__ === true, development-level warning are ON, performance optimizations are OFF'
2015-08-25 11:39:46.835 [info][tid:com.facebook.React.JavaScript] 'RENDER SCENE!'
2015-08-25 11:39:52.098 [info][tid:com.facebook.React.JavaScript] 'TabBarExample: event willfocus', { route: '{"id":"navbar"}',
  target: 
   { _eventEmitter: 
      { _subscriber: 
         { _subscriptionsForType: 
            { willfocus: 
               [ { subscriber: [Circular],
                   listener: [Function: _onFocus],
                   context: [Circular],
                   eventType: 'willfocus',
                   key: 0 },
                 { subscriber: [Circular],
                   listener: [Function],
                   context: undefined,
                   eventType: 'willfocus',
                   key: 1 } ],
              didfocus: 
               [ { subscriber: [Circular],
                   listener: [Function: _onFocus],
                   context: [Circular],
                   eventType: 'didfocus',
                   key: 0 },
                 { subscriber: [Circular],
                   listener: [Function],
                   context: undefined,
                   eventType: 'didfocus',
                   key: 1 } ] },
           _currentSubscription: null },
        _emitting: true,
        _emitQueue: [],
        _target: [Circular],
        _currentSubscription: 
         { subscriber: 
            { _subscriptionsForType: 
               { willfocus: 
                  [ { subscriber: [Circular],
                      listener: [Function: _onFocus],
                      context: [Circular],
                      eventType: 'willfocus',
                      key: 0 },
                    [Circular] ],
                 didfocus: 
                  [ { subscriber: [Circular],
                      listener: [Function: _onFocus],
                      context: [Circular],
                      eventType: 'didfocus',
                      key: 0 },
                    { subscriber: [Circular],
                      listener: [Function],
                      context: undefined,
                      eventType: 'didfocus',
                      key: 1 } ] },
              _currentSubscription: null },
           listener: [Function],
           context: undefined,
           eventType: 'willfocus',
           key: 1 } },
     _currentRoute: { id: 'navbar' } },
  type: 'willfocus' }
2015-08-25 11:39:52.100 [info][tid:com.facebook.React.JavaScript] 'RENDER SCENE!'
2015-08-25 11:39:52.101 [info][tid:com.facebook.React.JavaScript] 'RENDER SCENE!'
2015-08-25 11:39:52.615 [info][tid:com.facebook.React.JavaScript] 'TabBarExample: event didfocus', { route: '{"id":"navbar"}',
  target: 
   { _eventEmitter: 
      { _subscriber: 
         { _subscriptionsForType: 
            { willfocus: 
               [ { subscriber: [Circular],
                   listener: [Function: _onFocus],
                   context: [Circular],
                   eventType: 'willfocus',
                   key: 0 },
                 { subscriber: [Circular],
                   listener: [Function],
                   context: undefined,
                   eventType: 'willfocus',
                   key: 1 },
                 { subscriber: [Circular],
                   listener: [Function],
                   context: undefined,
                   eventType: 'willfocus',
                   key: 2 } ],
              didfocus: 
               [ { subscriber: [Circular],
                   listener: [Function: _onFocus],
                   context: [Circular],
                   eventType: 'didfocus',
                   key: 0 },
                 { subscriber: [Circular],
                   listener: [Function],
                   context: undefined,
                   eventType: 'didfocus',
                   key: 1 },
                 { subscriber: [Circular],
                   listener: [Function],
                   context: undefined,
                   eventType: 'didfocus',
                   key: 2 } ] },
           _currentSubscription: null },
        _emitting: true,
        _emitQueue: [],
        _target: [Circular],
        _currentSubscription: 
         { subscriber: 
            { _subscriptionsForType: 
               { willfocus: 
                  [ { subscriber: [Circular],
                      listener: [Function: _onFocus],
                      context: [Circular],
                      eventType: 'willfocus',
                      key: 0 },
                    { subscriber: [Circular],
                      listener: [Function],
                      context: undefined,
                      eventType: 'willfocus',
                      key: 1 },
                    { subscriber: [Circular],
                      listener: [Function],
                      context: undefined,
                      eventType: 'willfocus',
                      key: 2 } ],
                 didfocus: 
                  [ { subscriber: [Circular],
                      listener: [Function: _onFocus],
                      context: [Circular],
                      eventType: 'didfocus',
                      key: 0 },
                    [Circular],
                    { subscriber: [Circular],
                      listener: [Function],
                      context: undefined,
                      eventType: 'didfocus',
                      key: 2 } ] },
              _currentSubscription: null },
           listener: [Function],
           context: undefined,
           eventType: 'didfocus',
           key: 1 } },
     _currentRoute: { id: 'navbar' } },
  type: 'didfocus' }
2015-08-25 11:39:52.622 [info][tid:com.facebook.React.JavaScript] 'NavigationBarSample : event didfocus', { route: '{"id":"navbar"}',
  target: 
   { _eventEmitter: 
      { _subscriber: 
         { _subscriptionsForType: 
            { willfocus: 
               [ { subscriber: [Circular],
                   listener: [Function: _onFocus],
                   context: [Circular],
                   eventType: 'willfocus',
                   key: 0 },
                 { subscriber: [Circular],
                   listener: [Function],
                   context: undefined,
                   eventType: 'willfocus',
                   key: 1 },
                 { subscriber: [Circular],
                   listener: [Function],
                   context: undefined,
                   eventType: 'willfocus',
                   key: 2 } ],
              didfocus: 
               [ { subscriber: [Circular],
                   listener: [Function: _onFocus],
                   context: [Circular],
                   eventType: 'didfocus',
                   key: 0 },
                 { subscriber: [Circular],
                   listener: [Function],
                   context: undefined,
                   eventType: 'didfocus',
                   key: 1 },
                 { subscriber: [Circular],
                   listener: [Function],
                   context: undefined,
                   eventType: 'didfocus',
                   key: 2 } ] },
           _currentSubscription: null },
        _emitting: true,
        _emitQueue: [],
        _target: [Circular],
        _currentSubscription: 
         { subscriber: 
            { _subscriptionsForType: 
               { willfocus: 
                  [ { subscriber: [Circular],
                      listener: [Function: _onFocus],
                      context: [Circular],
                      eventType: 'willfocus',
                      key: 0 },
                    { subscriber: [Circular],
                      listener: [Function],
                      context: undefined,
                      eventType: 'willfocus',
                      key: 1 },
                    { subscriber: [Circular],
                      listener: [Function],
                      context: undefined,
                      eventType: 'willfocus',
                      key: 2 } ],
                 didfocus: 
                  [ { subscriber: [Circular],
                      listener: [Function: _onFocus],
                      context: [Circular],
                      eventType: 'didfocus',
                      key: 0 },
                    { subscriber: [Circular],
                      listener: [Function],
                      context: undefined,
                      eventType: 'didfocus',
                      key: 1 },
                    [Circular] ] },
              _currentSubscription: null },
           listener: [Function],
           context: undefined,
           eventType: 'didfocus',
           key: 2 } },
     _currentRoute: { id: 'navbar' } },
  type: 'didfocus' }
2015-08-25 11:41:46.864 [warn][tid:com.facebook.React.JavaScript] 'devtools socket closed'

[chirag04]

@ericvicenti I can reproduce this again(called twice now instead of every route) and the problem is because of this check:
https://github.com/facebook/react-native/blob/master/Libraries/CustomComponents/Navigator/Navigator.js#L1084

eg: say we have routes with index: [0, 1] and push index 2 route. presentIndex=1.
That check will be fail for index 1 and 2.

That check seems unnecessary also.

cc @ide @brentvatne

[chirag04]

cc @hedgerwang

[chirag04]

Let the discussion continue on #3016. Closing for now.

[adnbsr]

@chirag04 @ericvicenti Why did we push back on v 0.20 ?

[ranjitpandit]

Hi, I'm running into this issue with v0.21. Is it fixed on a specific version and if so which one would it be?

[dritan-x]

I'm experiencing this problem too. I just pushed the details route after user clicked on an item in the list view and render() gets called multiple times. Performance is really taking a toll.

'RENDER SCENE', { name: 'List', index: 1 }
'RENDER SCENE', { name: 'Details', index: 2 }

[getnashty]

I'm also experiencing this behavior with renderScene called two times... Also, when I wrapped the renderScene call in a debounce, it didn't work with trailing or leading invocations.