React props children with List and Spinner Loader I have a custom component with a List. I need to know if this way is the best for show a Spinner while the fetch is working.

I'm using child props for that, but I don't know if this way is the correct.

import React, { Component, PropTypes } from 'react';
import demoData from './demodata';
// Other import stuff...


export default class HomeScreen extends Component {
  // Constructor component
  constructor(props) {
    super(props);
    const ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) =&gt; r1 !== r2,
      sectionHeaderHasChanged: (s1, s2) =&gt; s1 !== s2
    });

    this.state = {
      dataSource: ds.cloneWithRows(demoData),
      loading: true
    };

    // Service for fetching data
    this.service = new ServiceApp();
  }

  componentDidMount() {
    this
      .fetchData();

  }

 // Simulate fetchData
 fetchData() {        
      const self = this;
      setTimeout(() =&gt; {
         self.setState({
            loading: false
         });
      }, 4000);        
  }

  render() {
    const component = this.state.loading ? &lt;Spinner /&gt; : (&lt;ListView
      style={styles.container}
      dataSource={this.state.dataSource}
      renderRow={data =&gt; &lt;Row {...data} /&gt;} /&gt;);

    return (                  
        &lt;Content&gt;
          {component}
        &lt;/Content&gt;          
    );
  }
}
The way I do it is to have both the Spinner and the components in the render and pass it the loading prop and inside the Spinner component it will render the spinner if loading is set to true and return null if its set to false. That way you're not re-rendering the whole listview when you toggle it on and off.

this.state = {
  loading: false,
} //in the contructor

componentDidMount() {
this.setState({ loading: true }, () =&gt; this.fetchData());
}

// Simulate fetchData
fetchData = () =&gt; {        
  //const self = this; you don't need this line
  setTimeout(() =&gt; {
     this.setState({
        loading: false
     });
  }, 4000);        //after you receive the response, you set it back to false
}

render() {

  return (                  
    &lt;Content&gt;
      &lt;Spinner visible={this.state.loading} /&gt;
      &lt;ListView
        style={styles.container}
        dataSource={this.state.dataSource}
        renderRow={data =&gt; &lt;Row {...data} /&gt;} /&gt;
    &lt;/Content&gt;          
  );
}