Warning - Redux and RNRF - Cannot update during an existing state transition

[arribbar]

Version

Tell us which versions you are using:

• react-native-router-flux v4.0.0-beta17 (v3 is not supported)
• react-native v0.47.1

Actual behaviour

I have the following warning:

Warning: Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`

According to the logs, it seems there is problem to do the setup between RNRF, RN and Redux.

reactConsoleErrorHandler | @ | ExceptionsManager.js:73
-- | -- | --
  | console.error | @ | YellowBox.js:67
  | printWarning | @ | warning.js:36
  | warning | @ | warning.js:60
  | getInternalInstanceReadyForUpdate | @ | ReactNativeStack-dev.js:1520
  | enqueueForceUpdate | @ | ReactNativeStack-dev.js:1537
  | ReactComponent.forceUpdate | @ | react.development.js:185
  | (anonymous) | @ | native.js:621
  | Reaction.runReaction | @ | mobx.js:2958
  | runReactionsHelper | @ | mobx.js:3086
  | reactionScheduler | @ | mobx.js:3064
  | (anonymous) | @ | mobx.js:3093
  | batchedUpdates | @ | ReactNativeStack-dev.js:2077
  | batchedUpdates$1 | @ | ReactNativeStack-dev.js:1456
  | reactionScheduler | @ | mobx.js:3093
  | runReactions | @ | mobx.js:3069
  | endBatch | @ | mobx.js:2625
  | endAction | @ | mobx.js:903
  | executeAction | @ | mobx.js:870
  | res | @ | mobx.js:858
  | NavigationStore.dispatch | @ | navigationStore.js:376
  | NavigationStore.create | @ | navigationStore.js:255
  | Router | @ | Router.js:41
  | StatelessComponent.render | @ | ReactNativeStack-dev.js:1595
  | (anonymous) | @ | ReactNativeStack-dev.js:1863
  | measureLifeCyclePerf | @ | ReactNativeStack-dev.js:1610
  | _renderValidatedComponentWithoutOwnerOrContext | @ | ReactNativeStack-dev.js:1862
  | _renderValidatedComponent | @ | ReactNativeStack-dev.js:1872
  | _updateRenderedComponent | @ | ReactNativeStack-dev.js:1839
  | _performComponentUpdate | @ | ReactNativeStack-dev.js:1823
  | updateComponent | @ | ReactNativeStack-dev.js:1804
  | receiveComponent | @ | ReactNativeStack-dev.js:1769
  | receiveComponent | @ | ReactNativeStack-dev.js:1345
  | _updateRenderedComponentWithNextElement | @ | ReactNativeStack-dev.js:1844
  | _updateRenderedComponent | @ | ReactNativeStack-dev.js:1840
  | _performComponentUpdate | @ | ReactNativeStack-dev.js:1823
  | updateComponent | @ | ReactNativeStack-dev.js:1804
  | receiveComponent | @ | ReactNativeStack-dev.js:1769
  | receiveComponent | @ | ReactNativeStack-dev.js:1345
  | _updateRenderedComponentWithNextElement | @ | ReactNativeStack-dev.js:1844
  | _updateRenderedComponent | @ | ReactNativeStack-dev.js:1840
  | _performComponentUpdate | @ | ReactNativeStack-dev.js:1823
  | updateComponent | @ | ReactNativeStack-dev.js:1804
  | performUpdateIfNecessary | @ | ReactNativeStack-dev.js:1772
  | performUpdateIfNecessary | @ | ReactNativeStack-dev.js:1353
  | runBatchedUpdates | @ | ReactNativeStack-dev.js:1469
  | perform | @ | ReactNativeStack-dev.js:1382
  | perform | @ | ReactNativeStack-dev.js:1382
  | perform | @ | ReactNativeStack-dev.js:1451
  | flushBatchedUpdates | @ | ReactNativeStack-dev.js:1476
  | closeAll | @ | ReactNativeStack-dev.js:1412
  | perform | @ | ReactNativeStack-dev.js:1388
  | batchedUpdates | @ | ReactNativeStack-dev.js:2077
  | enqueueUpdate$1 | @ | ReactNativeStack-dev.js:1481
  | enqueueUpdate | @ | ReactNativeStack-dev.js:1510
  | enqueueSetState | @ | ReactNativeStack-dev.js:1556
  | ReactComponent.setState | @ | react.development.js:167
  | onStateChange | @ | connectAdvanced.js:222
  | dispatch | @ | createStore.js:186
  | (anonymous) | @ | index.js:14
  | dispatch | @ | applyMiddleware.js:45
  | checkResponseAuth | @ | authActions.js:122
  | (anonymous) | @ | authActions.js:95
  | tryCallOne | @ | core.js:37
  | (anonymous) | @ | core.js:123
  | (anonymous) | @ | JSTimers.js:262
  | _callTimer | @ | JSTimers.js:143
  | callImmediatesPass | @ | JSTimers.js:443
  | callImmediates | @ | JSTimers.js:459
  | __callImmediates | @ | MessageQueue.js:244
  | (anonymous) | @ | MessageQueue.js:128
  | __guard | @ | MessageQueue.js:231
  | flushedQueue | @ | MessageQueue.js:127
  | callFunctionReturnFlushedQueue | @ | MessageQueue.js:106
  | (anonymous) | @ | debuggerWorker.js:72

I do the setup like this :

const App = () => {
    StatusBar.setBackgroundColor('#323232');
    return (
        <Provider store={store} >
            <Router />
        </Provider>
    );
};

And in my Router component, it is here I have all my routes.

            <Router>
                <Scene
                    key='root'
                >
...

I have 2 questions:

• Should I use wrabBy in and if yes, what should I put ?
• What is weird in the logs is that I do not use MobX and there are some logs coming from MobX.js. My supposition is that I did not correctly the setup (it was working with old version of RNRF).
  What do you think ?

Steps to reproduce

I'll try to make an example.

[aksonov]

Duplicate of #2063 ?

[aksonov]

Also https://github.com/mobxjs/mobx-react/blob/master/README.md#faq could be helpful. I will wait for Example.

[arribbar]

Thanks for your quick reply. It might be indeed a duplicate from #2063.
I have the bug with:

• AppState. I added two listeners which can change the state
• check which view to display first, either login or dashboard.

How would you solve this ? By adding a new scene checking which view to be displayed ?

[arribbar]

Ok, I tried to the solution from #2063 and it works. Thanks @aksonov :)
But I have still an issue with my listeners about net Info and app state. How would you do it ?

[aksonov]

I need to see code. Please fork & modify Example to reproduce the issue.

[arribbar]

Ok, I did it differently. Works fine for me.
Thanks @aksonov

[aksonov]

Maybe you can post solution here, it could be useful for others...

[arribbar]

Well, I do not think it is the best answer but what I did to resolve my but:

• Make router component a stateless component
• Create a init scene in which I set up all my listeners. I check also if my user is connected before redirecting to the right scene. It is of course the first scene to be loaded in order to do all the setup

[GenericJam]

This may be helpful for others or not. I didn't have this problem until I started tracking state changes in redux myself. These values are fed into the pages as props. When the props are changing at the same time as the component is changing, react interprets this as an error (warning actually). This is unavoidable in my situation without a significant rewrite so I chose to suppress this specific warning with a line like this:

console.ignoredYellowBox = [
      "Warning: Cannot update during an existing state transition (such as within `render` or another component's constructor). Render methods should be a pure function of props and state; constructor side-effects are an anti-pattern, but can be moved to `componentWillMount`."
    ];

By suppressing only this warning I will still receive others.
Generally speaking I don't recommend suppressing warnings.