Flatlist performance slow

Description

I’m using FlatList to load some records. Above the FlatList I have a button and when I tap this button with 230 items loaded in the FlatList, the performance gets horrible.

I’m using a Smartphone ASUS Zenfone Go LTE ZB500KL-1A058BR with android 6.0

I’ve created a video to better illustrate: http://www.youtube.com/watch?v=EIlDnoewVhc

My code:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  FlatList,
  TouchableOpacity,
  TextInput,
  TouchableWithoutFeedback,
} from 'react-native';

const GLOBAL_DATA = [];
const PER_PAGE = 10;

const paginateArray = (array, pageSize, pageNumber) => {
  const _pageNumber = pageNumber - 1;
  return array.slice(_pageNumber * pageSize, (_pageNumber + 1) * pageSize);
};

for (let i = 0; i <= 1000; i++) {
  GLOBAL_DATA.push({
    key: i,
    produto: {
      descricao: 'Item number ' + i,
    }
  });
}

export default class flatlistdemo extends Component {
  constructor(props) {
    super(props);
  
    this.state = {
      type: 'default',
      data: [],
      page: 1,
    };
  }

  componentDidMount() {
    this.setState({
      data: paginateArray(GLOBAL_DATA, PER_PAGE, this.state.page),
    });
  }

  getPagedOffers = () => {
    this.setState((state) => ({
      data: state.data.concat( paginateArray(GLOBAL_DATA, PER_PAGE, this.state.page) ),
    }));
  }

  handleLoadMore = () => {
    this.setState(
      {
        page: this.state.page + 1,
      },
      () => {
        this.getPagedOffers();
      }
    );
  }

  renderType = () => {
    if (this.state.type === 'default') {
      return (
        <View>
          <TouchableOpacity 
            onPress={() => {
              this.setState({
                type: 'other'
              });
            }}
            style={{backgroundColor: 'black', padding: 10}}
          >
            <Text
              style={{color: '#fff'}}
            >
              touch here to change the type 01
            </Text>
          </TouchableOpacity>
        </View>
      );
    } else {
      return (
        <View>
          <TouchableOpacity 
            onPress={() => {
              this.setState({
                type: 'default'
              });
            }}
            style={{backgroundColor: 'blue', padding: 10}} 
          >
            <Text
              style={{color: '#fff'}}
            >
              touch here to change the type 02
            </Text>
          </TouchableOpacity>
        </View>
      );
    }
  }

  render() {
    return (
      <View style={styles.container}>
        {this.renderType()}
        <FlatList
          data={this.state.data}
          onEndReached={this.handleLoadMore}
          onEndReachedThreshold={50}
          getItemLayout={(data, index) => (
            {length: 40, offset: 40 * index, index}
          )}
          renderItem={
            ({item}) => {
              return (
                <View 
                style={{
                  paddingVertical: 10,
                }}>
                  <TouchableOpacity onPress={() => null}>
                    <Text 
                      style={{
                        color: '#000', 
                        height: 40,
                        justifyContent: 'center'
                      }}>
                      {item.produto.descricao}
                    </Text>
                  </TouchableOpacity>
                </View>
              );
            }
          }
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 30,
    alignItems: 'center',
  },
});

AppRegistry.registerComponent('flatlistdemo', () => flatlistdemo);

Solution

Maybe something is wrong with my display: none / block?

Additional Information

• React Native version: 0.43.4
• Platform: Android 6.0
• Development Operating System: MacOS Sierra
• Dev tools: Xcode

[navid94]

I think that you have to create a React.PureComponent for each item that you render in renderItem:

class MyListItem extends React.PureComponent {
  render() {
    return (
        <View 
                style={{
                  paddingVertical: 10,
                }}>
                  <TouchableOpacity onPress={() => null}>
                    <Text 
                      style={{
                        color: '#000', 
                        height: 40,
                        justifyContent: 'center'
                      }}>
                      {this.props.produto.descricao}
                    </Text>
                  </TouchableOpacity>
                </View>
    )
  }
}

_renderItem = ({item}) => (
    <MyListItem
         produto={item.produto}
    />
  );

<FlatList
          data={this.state.data}
          onEndReached={this.handleLoadMore}
          onEndReachedThreshold={50}
          getItemLayout={(data, index) => (
            {length: 40, offset: 40 * index, index}
          )}
          renderItem={this._renderItem}
        />

This should make performance much better since items will not update everytime, as suggested here http://facebook.github.io/react-native/releases/0.44/docs/flatlist.html (doc version 0.44). Otherwise you can use http://facebook.github.io/react-native/docs/virtualizedlist.html#shoulditemupdate , but it will be deprecated in 0.44 in favor of React.PureComponent. Before using PureComponent read the following:

This is a PureComponent which means that it will not re-render if props remain shallow- equal. Make sure that everything your renderItem function depends on is passed as a prop that is not === after updates, otherwise your UI may not update on changes. This includes the data prop and parent component state.

[gregblass]

Are functional components even better in this case than pure components? My list items don’t need state at all, so I figured that would be the most performant solution? Or are they going to be not as efficient as a pure component for some reason?

EDIT: Functional components are not better in cases like this. You want to use pure components or shouldComponentUpdate.