React-native-router-flux: Seeing a lot of warning "called setState.." on an unmounted component

Created on 12 Sep 2017 · 9Comments · Source: aksonov/react-native-router-flux

I'm migrating from v3 to v4 and I see loads of warning
screen shot 2017-09-12 at 10 48 57

Bear in mind this is the same business logic code that was working on v3.

I have an app where I use redux (but do not integrate it with RNRF) and it feels like there is something wrong with updating a scene that's not currently active but in the stack.

Example, navigate from SceneA -push-> SceneB
if I change something in SceneB that triggers a change in the global redux state, then SceneA which is subscribed to get updates with connect() is getting newProps but somehow there is a strange behaviour.

I'm still investigating but if you have any info about this that would be great.

Thank you!

Version

"react-native-router-flux": "4.0.0-beta.21"
"react-native": "0.46.4"

Source

mtt87

👍5

Most helpful comment

seems like the component is constantly being mounted - unmounted - mounted
whenever I trigger a certain redux action

export function clearSavedDaily() {
  return { type: 'CLEAR_SAVED_DAILY' };
}

```js
case 'CLEAR_SAVED_DAILY':
return Object.assign({}, state, {
savedDaily: {
ruleId: -1,
couponId: '',
createdAt: moment().valueOf(),
},
});

```js
constructor(props) {
    super(props);
    console.log('component created');
  }

  componentWillMount() {
    console.log('component will mount');
  }

  componentDidMount() {
    console.log('component mounted');
  }

console log
screen shot 2017-09-12 at 13 25 02

mtt87 on 12 Sep 2017

👍3

All 9 comments

seems like the component is constantly being mounted - unmounted - mounted
whenever I trigger a certain redux action

export function clearSavedDaily() {
  return { type: 'CLEAR_SAVED_DAILY' };
}

```js
case 'CLEAR_SAVED_DAILY':
return Object.assign({}, state, {
savedDaily: {
ruleId: -1,
couponId: '',
createdAt: moment().valueOf(),
},
});

```js
constructor(props) {
    super(props);
    console.log('component created');
  }

  componentWillMount() {
    console.log('component will mount');
  }

  componentDidMount() {
    console.log('component mounted');
  }

console log
screen shot 2017-09-12 at 13 25 02

mtt87 on 12 Sep 2017

👍3

I faced the same issue after upgrading from v3 to v4. Both, the setState-Warning and also that all Rows in a ListView/FlatList got mounted and unmounted on changes in the redux-store

itinance on 16 Oct 2017

kesha-antonov on 22 Oct 2017

Same

pottercomuneo on 5 Dec 2017

Nigh7Sh4de on 19 Dec 2017

mkhuda on 10 Apr 2018

Leadrive on 20 May 2018

just before you going to next Action with params or not. you can try SetTimeout like me. it does explain why this error is popping I am also struggling but my theory is that, imagine one success login dispatch from redux we show toast to user say "successful login" and in the callback of toast we moved to screen B. <---- that's where the error is lying. I believe as toast as toast was still there mounted and was probably fading away with its animation. we moved to screen B thus the toasts couldn't call SetSate to hide itself.

I hope to find any solution or suggestions. but for now SetTimeout is doing the hack