st0ffern / react-native-optimized-flatlist

Optimization for complex and slow React Native FlatLists
MIT License
259 stars 47 forks source link

Warning still alive #19

Open vendramini opened 6 years ago

vendramini commented 6 years ago

VirtualizedList: You have a large list that is slow to update - make sure your renderItem function renders components that follow React performance best practices like PureComponent, shouldComponentUpdate, etc.

This warning still after installing this library. My context is the following: whenever I reach the end of the list I call the server to update my reducer, then update the list. Simple as that.

<OptimizedFlatList
    data={history.orders_ids}
    extraData={history}
    keyExtractor={(item, index) => index}
    renderItem={orderId => <FlatListItem order={history.orders[orderId.item]} history={history} onPress={this.onPressOrder.bind(this, orderId.item)} state={this.props.state} />}
    ItemSeparatorComponent={() => <FlatListItemSeparator/>}
    onEndReached={this.onEndReached.bind(this)}
    onEndReachedThreshold={0.2}
/>

Where history.orders_ids = [1, 2, 3, etc] and I do have history.orders which is an object like:

{
    1: {id: 1, name: 'Test1', ...otherProps},
    2: {id: 2, name: 'Test2', ...otherProps},
    etc
}

My <FlatListItem/>:

class FlatListItem extends PureComponent {
    render() {
        const {onPress, order, history} = this.props;
        return(
            <TouchableOpacity onPress={onPress}>
                {/*views, images, etc*/}
            </TouchableOpacity>
        );
    }
}

Am I doing something wrong?

Thanks!