FlatList - while list is scrolling/rendering items the JS thread is blocked, onPress are super delayed.

[grundmanise]

Description

While FlatList is scrolling and/or rendering items the JS thread is blocked.. any events (onPress etc) on TocuchableWhatever are ingored or processed after FlatList finishes rendering. How can I pause FlatList rendering and process onPress?

Content rendered by FlatList while scrolling uses InteractionManager so if you want to pause it you just need to create an interaction handle. (c) @sahrens

I've tried that on my ListItem:

export default class ListItem extends Component { 

    shouldComponentUpdate() {
        return false;
    }

    render() {
        const {item} = this.props;

        return (
                <TouchableHighlight style={styles.item} underlayColor='rgba(255,255,255,.3)' activeOpacity={0.7} onPress={this._onPress}>
                     <View style={styles.row}>
                        <Image style={styles.image} source={{ uri: item.imgUrl}} />
                        <View style={styles.details}>
                            <BaseText style={styles.caption} weight={600}>{item.caption}</BaseText>
                            <BaseText style={styles.points}>{item.points} points</BaseText>
                        </View>
                        <TouchableOpacity hitSlop={{top: 10, left: 10, right: 10, bottom: 10}} >
                            <Icon style={styles.icon} name={item.favorite ? 'heart' : 'heart-outline'} size={24} color={'white'} />
                        </TouchableOpacity>
                    </View>
                </TouchableHighlight>
                )
    }

    _onPress = () => {
        const handle = InteractionManager.createInteractionHandle();
        this.props.onPress(this.props.item.key);
        InteractionManager.clearInteractionHandle(handle);
    }

}

but it does not fix the issue.
Am I doing it wrong?

Additional Information

• React Native version: 0.42.0
• Platform: tired only on iOS (device)
• Operating System: MacOS
• Dev tools: Xcode

[sahrens]

Can you describe more precisely the problem you're seeing? How much of a delay is there when you press the button? If you let it sit for a bit before pressing, is there any delay? Or only if you just finished scrolling? What is triggered by the onpress? More code is helpful, e.g. in a gist. Creating a handle can only pause queued tasks, it can't stop already running tasks, so if you're already doing something expensive when the onpress happens you'll have to wait for it to finish. Does this only repro with FlatList? No issue with ListView?

[pocesar]

for me, around 70 items, all with same height, had to change TouchableOpacity for TouchableWithoutFeedback, was getting 4-5 second delay for the press to happen (on Android)

[grundmanise]

Can you describe more precisely the problem you're seeing?
When FlatList is scrolled (some items are rendered, but still renders offscreen items) and I press on any already rendered item the press is ignored/or is delayed few sec/or TouchableHighlight laggs: underlayColor is visible for few seconds. When I scroll and wait few sec (till it finishes rendering items batch) - everything ok.
How much of a delay is there when you press the button?
No on press event is fired at all and I have to press several times before ListItem becomes responsive. Sometimes TouchableHighlight laggs: underlayColor is visible for few seconds.
In the perf monitor I see that JS FPS is <10 - list is rendering offscreen items(?).
If you let it sit for a bit before pressing, is there any delay?
Almost no delay. Everything works as expected.
Or only if you just finished scrolling?
"just finished scrolling" - as described above - there is a noticeable delay.
What is triggered by the onpress?
Nothing, empty fn.

ListView - no issue.

import React, { PureComponent } from 'react'
import { View, StyleSheet, InteractionManager } from 'react-native'
import { colors,  componentSpecific } from 'src/theme'
import FlatList from 'react-native/Libraries/Experimental/FlatList';
import ListItem from './ListItem'

const { slider, list } = componentSpecific;

const viewabilityConfig = {
  minimumViewTime: 3000,
  viewAreaCoveragePercentThreshold: 100,
  waitForInteraction: true,
};

export default class List extends PureComponent {

    render() {
        return (
            <FlatList
                SeparatorComponent={this._renderSeparatorComponent}
                data={this.props.data}
                getItemLayout={this._getItemLayout}
                key={'List'}
                legacyImplementation={false}
                numColumns={1}
                //onRefresh={this._onRefresh}
                ref={(ref) => { this._listRef = ref; }}
                refreshing={false}
                renderItem={this._renderItemComponent}
                shouldItemUpdate={this._shouldItemUpdate}
                viewabilityConfig={viewabilityConfig}
                keyExtractor={this._keyExtractor}

                // ScrollView props
                directionalLockEnabled={true}

                style={styles.list}
            />
        )
    }

    _renderItemComponent = ({item}) => {
        return (
            <ListItem item={item} onPress={this._pressItem}/>
        )
    }

    _renderSeparatorComponent = () => {
        return (
            <View style={styles.separator} />
        )
    }

    _shouldItemUpdate = (prev, next) => {
        return prev.item !== next.item;
    }

    _getItemLayout = (data, index) => {
        return { length: list.itemHeight, offset: (list.itemHeight + list.separatorHeight) * index, index }
    }

    _keyExtractor = (item) => {
        return item.id.toString();
    }

    _pressItem = (water) => {
   
    }

}
const styles = StyleSheet.create({
    list: {
        flex: 1,
    },
    separator: {
        height: list.separatorHeight,
        backgroundColor: 'white',
        opacity: 0.3,
    },
});

[sahrens]

Hmm, worrisome. Do you see any similar issues with FlatListExample in the UIExplorer?

[sahrens]

Some other debugging tools:

• set debug={true} on the FlatList and see if anything looks weird
• call InteractionStallDebugger.install in init

[grundmanise]

Just a tiny delay in FlatListExample in UIExplorer. It is a neglectable delay compared to one in my app.
I also see < 10 fps in FlatListExample sometimes , but still there is just a tiny delay.

[sahrens]

Oh, how are you updating your data prop? Do you maintain immutability of your items? Does your shouldItemUpdate ever return false?

[sahrens]

There is also a "performance" option in the inspector that might help.

[grundmanise]

data pop is coming from a container component which is tied to the redux. The data is static for now.

Can't find InteractionStallDebugger in RN 0.42.0 /Libraries/Interaction.

shouldItemUpdate always return false.

Setting debug={true} gives me a red screen error:

'Tried to get frame for out of range index 0' __getFrameMetrics VirtualizedList.js:652:14

Don't know why, becuase I don't render FlatList if the data is empty:

    render() {
        if (!this.props.data) {
            return (
                <SpinnerOverlay text={'Loading...'}/>
            )
        }

        return (
            <FlatList
                SeparatorComponent={this._renderSeparatorComponent}
                data={this.props.data}
                getItemLayout={this._getItemLayout}
                key={'List'}
                legacyImplementation={false}
                numColumns={1}
                //onRefresh={this._onRefresh}
                ref={(ref) => { this._listRef = ref; }}
                refreshing={false}
                renderItem={this._renderItemComponent}
                shouldItemUpdate={this._shouldItemUpdate}
                viewabilityConfig={viewabilityConfig}
                keyExtractor={this._keyExtractor}

                // ScrollView props
                directionalLockEnabled={true}

                //debug
                debug={true}

                style={styles.list}
            />
        )
    }

[grundmanise]

I want to better describe what behaviour I am experiencing:

When FlatList was just scrolled and stopped (wtih a finger) first few taps on the ListItem are ignored, the same is in the FlatListExample in UIExplorer, but there FlatList items are rendered faster and only the 1st tap on the ListItem is ignored. My ListItems are a bit "heavier" and it could take several taps before they become responsive. Although if you wait ~1.5s seconds after scrolling fully stops - everything ok. So I think the problem is with a "heavier" items, that are taking longer to load.

I have 75 items in my list.

P.S.
What is the best way to push a screen on the ListItem press?

    _pressItem = (data) => {
        //const handle = InteractionManager.createInteractionHandle(); <-- will it help with performance issues?

        //this._listRef.recordInteraction(); <-- when should we call it? What is it for?
        // Push screen
        this.props.onListItemPress(data);

        //InteractionManager.clearInteractionHandle(handle);

    }

[sahrens]

https://github.com/facebook/react-native/blob/master/Libraries/Interaction/InteractionStallDebugger.js

You could potentially grab the interaction handle earlier, for example when scrolling stops or in onResponderGrant or shouldSetResponder.

You can also try mucking with the advanced props from VirtualizedList like the windowSize, updateCellsBatchingPeriod, and maxToRenderPerBatch

Not sure what you're asking about pushing a screen there are many navigation options out there but I think react-navigation is recommended?

[grundmanise]

thnx, I'll try InteractionStallDebugger and let you know.

Sorry for the confusion. I already use RNN. Let me rephrase my question:
Should I call InteractionManager.createInteractionHandle and/or recordInteraction() when the only thing that I am doing in the onPress is calling navigator.push({...params})?
Do I need interaction handle in this scenario at all? Do you think it can help with ListItem responsiveness issues?

---

You can also try mucking with the advanced props from VirtualizedList like the windowSize, updateCellsBatchingPeriod, and maxToRenderPerBatch

I'll try it and let you know.

Although what exactly waitForInteraction does? It wait's for interactions before doing what? May you explain a bit more?

[grundmanise]

May you provide an example on how to grab an interaction handle in onResponderGrant or shouldSetResponder?

[grundmanise]

@sahrens so I ended up setting maxToRenderPerBatch={1} it gives me worse fill rate, but a lot better perfomance..

Thanks for your help.

Can't wait when the cell reuse will be implemented natively.... it will be a huge step forward in performance and UX.

[sahrens]

Yeah, it is is pretty tricky balancing memory, fill rate, responsiveness, and frame rate but we'll keep optimizing!

[gregblass]

Getting the same issue. ~100 records, about a 1.5s delay. I can tap around 7 times during that time while the list is being rendered before I can navigate to the next stack.

EDIT: Nevermind, its definitely something with my settings. Narrowing down now...

EDIT 2: Its my search bar that I'm passing into ListHeaderComponent. Changing that to a PureComponent didn't make any difference. Strange.

EDIT 3: Yeah, as soon as my ListHeaderComponent has a height to it (and renders), I get a significant delay.

Performance breaks down around ~50 records or so.

[cdreier]

Hi, we experience similar issues.

• js thread drops heavily (to -2 Oo) when start scrolling
• touches on items gets lost / are heavily delayed
• using redux-observables with apollo-client to load more items with onEndReached
• i think we follow all the performance guidelines (PureComponents, initialListSize)

after spending all the day searching for a solution, i try to reproduce this issue in an example app, perhaps there is a performance bottleneck while running http requests?

[wouteralberts]

Having same issue as @gregblass; the simplest ListHeaderComponent (<View style={ {backgroundColor: 'lime', height: 50} }/>) causes a 4s delay. My list contains 100 items.

Delay is gone once I remove the header.

[gregblass]

Yep! This is a regression introduced in 0.45. As soon as the Expo Snack supports 0.45, I can prove it.

But anyone can make this happen themselves by making a flat list with 50+ items and adding literally anything to the header component in 0.45.

[jpokrzyk]

@gregblass @wouteralberts I have the same issue in my app. When I render a large observable collection in a SectionList with a ListHeaderComponent it takes forever.

But when I tried to reproduce it in a new vanilla project, I couldn't do it. Are either of you using the legacy navigator? It seems like the Navigator might be the variable. I'm only getting the delay when I nav to the scene through the navigator.

We're switching to React Navigation in the very near future. I'll try and remember to update this post with the results.

[wouteralberts]

@jpokrzyk Interesting. I do indeed use the Navigator from react-native-deprecated-custom-components.

If React Navigation fixes this for you, I may follow a similar upgrade path.

[cbjs]

same

[alkanyunus]

My problem is worst than yours. On android touch event(onPress) never work.
On android console the log I'm always getting:
"E/unknown:ReactNative: Got DOWN touch before receiving UP or CANCEL from last gesture"

navigator: Wix react-native-navigation

Flatlist -> ListItem(onPress)

[wellyshen]

I have the same issue. When items in FlatList are scrolling, my touch events are blocking (TouchableHighlight no response).

I'm wondering. How's the progress of this issue?

[wellyshen]

@sahrens May I know the process of the optimizing of this issue. I use FlatList to render 40 - 50 items the initial rendering performance is great, but the down-side is the action responsive got blocking while items are being scrolled. Which will cause very bad UX for user. But if I switch back to ScrollView the initial rendering performance also cause bad UX for user. So, as a product creator and developer. these trading off really bothering me :(

[arufian]

Hi All, did you already used requestAnimationFrame mixups to solve this issue ?

[mytc]

@arufian , tried, not work.

Seriously, is it a NR problem or our implementation? Doesn't seem affects all other people though.

[ChrisLahaye]

@TGPSKI many thanks for your patch. It improvements user interaction on scenes having lists significantly.

@wellyshen I would advice against using @bolan9999 package, it gave me many null pointer exceptions when using data refresh functionality. Simply not quality or production-ready code.

[mytc]

I end up using recyclerlistview. It's working great.

[XenorPLxx]

I've just posted on SO with similar issue, as solutions provided here don't really help my case.
https://stackoverflow.com/questions/48626555/figuring-out-performance-issues

[motasemobe]

I spent hours working around this issue i end up switching to DEV=FALSE and the issue disappeared

[react-native-bot]

Thanks for posting this! It looks like you may not be using the latest version of React Native, v0.53.0, released on January 2018. Can you make sure this issue can still be reproduced in the latest version?

I am going to close this, but please feel free to open a new issue if you are able to confirm that this is still a problem in v0.53.0 or newer.

_{How to Contribute • What to Expect from Maintainers}

[312362115]

still in v0.53.0

[DavitVosk]

The same problem here. I don't understand why this issue is closed if the problem is still active? Is there any solution for this?

[wellyshen]

No the problem still exist.

[louisiscoding]

It is still a pain in the ass to make a simple FlatList with 100+ Selectable Image.
This is a very common pattern, i'm surprised it is that hard to implement 🙄

[reza7rm]

The problem still exists and on the nerve !:|

[lsiden]

I had this problem too. This component gets its list from the Redux store. When the user scrolls the list, it requests the next 10 film titles to append to the list.

Each time a request for more titles is resolved, it created a new list with something like [...oldList, ...newList], as I had learned to do when modifying the redux state. This caused the FlatList to re-render everything including items previous items, even though my item component extends React.PureComponent.

I modified the reducer appended additional data from the same query to the original list without creating a new list. Now, it renders only the new entries. The delay after appending to the list in response to scrolls is no longer noticable. There is still a 1-2 second delay until items will respond to touches when it renders the first screenful of items after a new query, but I don't think that will be an issue for casual users.

I also set maxToRenderPerBatch={2} but I can no longer perceive a difference in performance.

Here's my FlatList:

<FlatList
  data={films}
  renderItem={renderItem}
  keyExtractor={item => item.imdbID}
  ListHeaderComponent={<Header totalResults={totalResults} />}
  ListFooterComponent={<Footer />}
  onEndReached={() => dispatchFetchPage()}
  initialNumToRender={8}
  maxToRenderPerBatch={2}
  onEndReachedThreshold={0.5}
/>

I previously had defined the getItemLayout prop, but found that it made now difference to performance when I removed it.

[dereknelson]

My flatlist (and sectionlist) have a header component. I am console logging both the render method and the header method, and though nothing is being rerendered, it seems the header is being rerendered as I scroll screenshot.
Note:

1. the data that the section list relies on never changes
2. render item is a pure component
   Here's my relevant code:
   (in render method)

<SectionList 
sections={this.state.alphabet}
keyboardShouldPersistTaps="always"
initialNumToRender={12}
ref={ref => this.list = ref}
keyExtractor={(item, index) => item.uuid}
renderItem={this.renderItem}
ListHeaderComponent={this.profileScreenHeader}
removeClippedSubviews
SectionSeparatorComponent={this.separator}
getItemLayout={(data, index) => ({
    length: 53, offset: 53 * index, index
})} />

(in rest of class)

    profileScreenHeader = () => {
        console.log('header rerender',)        
        return (
            <View>
                <this.SearchBar/>
                { this.state.searching ? null : <this.GroupsFlatlist/> }
                <this.friendsHeader/>
            </View>
        )
    }

    SearchBar = () => {
            return (
                <View style={{ flexDirection: 'row', alignItems: 'center', borderColor: Colors.grayColor, borderWidth: StyleSheet.hairlineWidth, }}>
                    <TextInput
                        style={{ width: width * .95, backgroundColor: 'white', paddingLeft: 15, fontSize: 18, paddingVertical: 15 }}
                        value={this.state.searchText}
                        ref={ref => this.textInput = ref}
                        onChangeText={this.setSearchText}
                        placeholder='Search friends'
                        autoCapitalize={'none'}
                        autoCorrect={false}
                        clearButtonMode="while-editing"
                    />
                </View>
            )
        }

[lsiden]

@prodigynelson, as it is now, every time state changes, everything will re-render. I would try converting the header and all it's sub-components into pure components that depend only on properties, not state. Subclass them from React.PureComponent which defines shouldComponentUpdate() with a shallow comparison of properties, which I think is what you want. Let me know if that helps.

[dereknelson]

@lsiden I changed it from ListHeaderComponent={this.profileScreenHeader} to ListHeaderComponent={this.profileScreenHeader()} and that prevented it rerendering as it scrolled.

[Udbhav12]

This problem still exists in 0.57.1

[janiokq]

If it's a performance problem caused by listview
You can try this library
react-native-nlist

[cristian-milea]

i also had this problem and i fixed the delay on TouchableOpacity inside rows with flex: 1 on FlatList. I also have only stateless components and PureComponents in row depth. The fix with flex 1 is strange but i got inspired by react-native-largelist docs.

hope it helps

<FlatList
        style={{ flex: 1 }}
...

[spruceDevelopment]

So I also had this problem for long time but then I rearchitectured my listItem template to be PureComponent and the problem disappeared. Hope it helps some other newbie like me ;)