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?