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) => r1 !== r2,      sectionHeaderHasChanged: (s1, s2) => 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(() => {         self.setState({            loading: false         });      }, 4000);          }  render() {    const component = this.state.loading ? <Spinner /> : (<ListView      style={styles.container}      dataSource={this.state.dataSource}      renderRow={data => <Row {...data} />} />);    return (                          <Content>          {component}        </Content>              );  }}
React props children with List and Spinner Loader
javascript;react.js
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 contructorcomponentDidMount() {this.setState({ loading: true }, () => this.fetchData());}// Simulate fetchDatafetchData = () => {          //const self = this; you don't need this line  setTimeout(() => {     this.setState({        loading: false     });  }, 4000);        //after you receive the response, you set it back to false}render() {  return (                      <Content>      <Spinner visible={this.state.loading} />      <ListView        style={styles.container}        dataSource={this.state.dataSource}        renderRow={data => <Row {...data} />} />    </Content>            );}