Question: I am confronting a very slow performance in React Native when rendering a component multiple times. I have an array of objects with the information to be consumed by the Component. For now the array has about 17 objects, so the same component will be displayed 17 time inside a ScrollView. The JS frame rate drops to a -2 fps when switching from `<PreviousComponent />` to `<Container />`. I am just showing the chunk of code relevant to the question and it is for explanation purposes. Another note, the Navigation I am using is react-navigation from react-community. `<EachCard />` is another component with a few Text and View components. The approach I am using is a standard one, I guess. 

I read the Performance page <https://facebook.github.io/react-native/docs/performance.html>. I have no console.log and also set the development mode to false.

So why does the JS fps drop to -2, and why does it take a few seconds to load the 17 components? I am using a real device (LG G4 @6.0)

```
class PreviousComponent extends React.Component {
render(){
    return(
        <Button onPress={()=> this.props.navigate('Container', {info: listings})} title="Go to Container" />
    );
  }
}

class Container extends React.Component {
render(){
    const { params }= this.props.navigation.state;
    let results = params.info.map((each) =>
        <EachCard name={each.name} position={each.position} etc1={each.etc1}  etc2={each.etc2}/>
    );
    return (
        <View>
            <ScrollView>
              {results}
            <ScrollView>
        </View>
    );
  }
}

```

Answer: 
1. Use Flatlist over Scrollview, add initialNumToRender={number} prop to Flatlist, as it will show only those component which visible on screen and detach other components.
2. Use PureComponent in Flatlist renderItem (In your case it will Each Card), so that they will only render whenever their props get changed.
3. check whether your component is re-rendering again and again(to test put console either in render() or in ComponentWillRecieveProps) if this is happening then use ShouldComponentUpdate.

I think implementing these three points will fix your problem.
It's recommended to use FlatList or ListView for any type of list components. They are optimised for performance and have built-in memory usage optimizations