Mounting Components in React Native

Question

I am relatively new to JS and RN and I am currently working with an app where I have bumped in to some major issues regarding my handling of Components.

I've tried to run through the following guide: https://facebook.github.io/react/docs/component-specs.html as well as https://facebook.github.io/react/docs/advanced-performance.html but the latter one flies a bit over my head.

However, as I understand: componentWillMount fires whatever piece of code that is within before the render function is executed, and componentWillUnmount erases whatever it sais to forget. Or how can I specify?

My specific problem lies within the fact that I have three functions, one main and within main I have compOne and compTwo, where the two latter are called in the main component when pressing on a certain sub-navigator. This means that I have three instances of getInitialState whereas compOne and compTwo defines basically the same stuff but calls different parts of the server (hence the code is very much the same).

Also this issue resurfaces sometimes when I go between different frames, and return again to my home screen.

In my Home screen I have it like this:

var Home = React.createClass({

  getInitialState: function() {    
    return {
      componentSelected: 'One',
      userName: "Loading...",
      friendFeed: 'Loading...',
      loaded: false,
      loadedlocal: false,
    };
  },
  componentWillMount: function() {
    Method.getFriendFeed(this.props.tokenSupreme)
    .then((res) => this.setState({
      friendFeed: JSON.parse(res).friendPosts,
      loaded: true,
    }))
    .catch((error) => console.log(error))
    .done();

    Method.getLocalFeed(this.props.tokenSupreme, )
    .then((res) => this.setState({
      localFeed: JSON.parse(res).friendPosts,
      loadedlocal: true,
    }))
    .catch((error) => console.log(error))
    .done();  
  },

Where I pass this.state.friedFeed to be a this.props.friendData in one of two components and vice versa for the localFeed.

Picking it up in my CompOne:

var ComponentOne = React.createClass({
  getInitialState: function() {
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
     return { 
      dataSource: ds.cloneWithRows(this.props.friendData),
   };
  },

  render: function() {
    if (!this.props.loaded) {
      return this.renderLoadingView(); 
    } else {
    return (
       <ListView 
          dataSource={this.state.dataSource} 
          renderRow={this.renderRow}
          style={styles.card} /> 
      )
    }
  },

Followed by the renderRow function etc and the compTwo function is basically identical.

But my question is: How should I go about to unmount the component? If it even is what I want? Another frequently but not consequently occuring issue is the error of null is not an object (evaluating 'prevComponentInstance._currentElement' with reference to the _updateRenderedComponent hence my belief that I should go about some different method in mounting, unmounting and updating my components, or am I wrong?

After some browsing ill add another question to this, which might be the main question... Is it even possible for a RN app to handle mutiple listviews and mulitple fetchers in mutilple scenes?

Answer 1

In most situations, you do not need to be concerned about unmounting the components. When a React component is no longer needed, React in general just forgets about it, including its contents, props, state, etc. componentWillUnmount is typically reserved for things that are in a global state that, once the component is forgotten about would cause problems if they still existed.

The documentation on the page you linked to mentions cleaning up timers as an example. In Javascript, if you set a timer via setTimeout() / setInterval() , those timers exist in the global space. Now imagine you had a component that set a timer to modify some element on screen or potentially try to interact with a component, let's say 30 seconds in the future. But then the user navigates away from the screen/component, and because it is no longer on screen React forgets about it. However, that timer is still running, and may cause errors if it fires and it can't interact with that now-trashed component. componentWillUnmount gives you a chance to clear out that timer so weird side effects don't occur when it fires to interact with elements that no longer exist.

In your case you probably don't have anything that needs cleanup, as far as I can tell. You might want to clarify your question because you don't say what the trouble behavior is that you're seeing , but note also that getInitialState is only called the first time a component is created, and won't get called if only props change. So if the friendData is changing but the component stays on the screen, you will need to update your ds via a componentWillReceiveProps .

To your last question, yes it is certainly possible for React to handle multiple ListViews/fetches/etc.