Performant way to display multiple components in React native

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>
    );
  }
}

Try rewriting with a listview instead of a scrollview. It's a lot more optimized for performance. — Matt Aft
– Matt Aft, Commented Mar 2, 2017 at 18:56
Are there any animations, heavy graphics or async api calls involved in these components? Or do they only contain some static stuff? Can you share the code of <EachCard> component here? — Rocky Balboa
– Rocky Balboa, Commented May 17, 2017 at 22:25

Rajat Gupta · Accepted Answer · 2018-03-12 11:04:55Z

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.
Use PureComponent in Flatlist renderItem (In your case it will Each Card), so that they will only render whenever their props get changed.
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.

edited Mar 12, 2018 at 11:04

answered Mar 12, 2018 at 10:59

Rajat Gupta

1,9541 gold badge11 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

patngo · Accepted Answer · 2018-03-12 09:09:09Z

0

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

answered Mar 12, 2018 at 9:09

patngo

6873 silver badges12 bronze badges

Collectives™ on Stack Overflow

Performant way to display multiple components in React native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related