How to check if a component is mounted in React-Native ES6

Question

I am setting a listener in my application and using force update whenever it is broadcasted but it gives error forceUpdate cant be called on unmounted component. How can I check if a component is mounted now that the isMounted() function is deprecated.

'use strict'; var React = require('react-native'); import ExpAndroid from './ExpAndroid'; var {   AppRegistry,   Image,   ListView,   TouchableHighlight,   StyleSheet,   Text,   View,   Component,   AsyncStorage,   Navigator,   DeviceEventEmitter } = React;  var rowID; var img=require('./resource/ic_pause_white.png');      class Example1 extends Component{   constructor(props) {     super(props);     this.state = {      };   }   componentWillMount(){        rowID = this.props.rowIdentity;       console.log("rowID "+rowID);    }   componentDidMount(){   console.log('component  mounted')   this.start();    DeviceEventEmitter.addListener('playMusicStatus', (data)=> {      if(data.playMusic==true){       img=require('./resource/ic_pause_white.png');        rowID++;         this.setState(this.state);         ExpAndroid.someMethod1("someurl);     }    }); }  componentWillUnmount(){   console.log('componentwill  unmounted') }    start() {      var  url = "some url";     ToastAndroid.prepareToPlay(url,true); }    render() {          return (       <Image source={require('./resource/album_back.png')} style={styles.background}>       <Image       source={{uri:this.state.trackDetails[rowID].thumnail_loc}}       style={styles.thumbnail}       />       <View style={styles.flowRow}>       <Text       style={styles.titles}       >text1 + {rowID}: </Text>       <Text       style={styles.titles}       >{this.state.details[rowID].text1}</Text>       </View>       <View style={styles.flowRow}>       <Text       style={styles.titles}       >text2 : </Text>       <Text       style={styles.titles}       >{this.state.details[rowID].text2}</Text>       </View>       <View style={styles.flowRow}>       <Text       style={styles.titles}       >Text3 : </Text>       <Text       style={styles.titles}       >{this.state.Details[rowID].Text3}</Text>       </View>       <View style={styles.flowRow}>       <Text       style={styles.titles}       >Text4 : </Text>       <Text       style={styles.titles}       >{this.state.details[rowID].Text4}</Text>       </View>         </Image>     );   } } var styles = StyleSheet.create({    container: {     flex: 1,    },   background: {     flex: 1,      width: null,     height: null,   },    flowRow : {     flexDirection :'row',    },   flowRowPlay : {     flexDirection :'row',     alignSelf:'center',    },   backgroundImage: {     flex: 1,     resizeMode: 'cover', // or 'stretch'   },    thumbnail: {     width: 100,     height: 120,     alignSelf:'center',     margin :30   },    controls: {     width: 30,     height: 30,     margin:20   },     titles: {     fontSize: 15,     margin:20,     color: 'white',    },   timings: {     fontSize: 12,     margin:5,     color: 'white',    }, });  module.exports = Example1; 

Answer 1

You can handle this yourself in your component:

componentDidMount() {    this._mounted = true; }  componentWillUnmount() {   this._mounted = false; } 

Then you can check the value of this._mounted in your listener.

Please note that using forceUpdate() should be avoided https://facebook.github.io/react/docs/component-api.html#forceupdate

Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render(). This makes your component "pure" and your application much simpler and more efficient.