# 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) => r1 !== r2,
sectionHeaderHasChanged: (s1, s2) => s1 !== s2
});

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

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

componentDidMount() {
this
.fetchData();

}

// Simulate fetchData
fetchData() {
const self = this;
setTimeout(() => {
self.setState({
});
}, 4000);
}

render() {
style={styles.container}
dataSource={this.state.dataSource}
renderRow={data => <Row {...data} />} />);

return (
<Content>
{component}
</Content>
);
}
}

• "I'm using child props for that, but I don't know if this way is the correct." Does it work as intended? – Mast Mar 8 '17 at 16:19
• Yes, works perfect, but I would like to know about performance re-render ;) – chemitaxis Mar 8 '17 at 16:20

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 = {
} //in the contructor

componentDidMount() {
}

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

render() {

return (
<Content>

• setState has an optional 2nd argument that gets invoked after state has been updated. So it's setting loading to true, then once done it will run this.fetchData. Also sorry you're right, but if you change fetchData(){ ... } to fetchData = () => { ... } it will work without having to do self=this. – Matt Aft Mar 8 '17 at 16:31
• So you have two options: you can create a container around that like you said and return the spinner or null depending on whether visible is true/false. option 2: Spinner is basically just the ActivityIndicator thats provided by RN so you can just use that instead and pass animating as the prop instead of visible. – Matt Aft Mar 8 '17 at 16:55