[Flatlist] getItemLayout fires multiple times upon every frame scrolled manually

[newah]

Environment

Environment:
OS: macOS High Sierra 10.13.6
Node: 8.9.4
Yarn: 1.3.2
npm: 5.5.1
Watchman: 4.9.0
Xcode: Xcode 9.4.1 Build version 9F2000
Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
react: 16.4.0 => 16.4.0
react-native: ^0.55.4 => 0.55.4

iOS

Description

Without getItemLayout flatlist works as expected - fast. With getItemLayout we started noticing rows aren't loading instantly when scrolling manually. After removing getItemLayout performance is good again.

We are using shouldComponentUpdate (also tried PureComponent).

In the gif you can see logs that getItemLayout is firing constantly when using flatlist manually - which seems to be why performance is suffering. Is this to be expected?

Reproducible Demo

Simplified my use-case with reusing part of someone else's demo :)

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

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

render() {
                    return <FlatList
                    data={['one', 'two', 'three', 'one', 'two', 'three', 'one', 'two', 'three', 'one', 'two', 'three', 'one', 'two', 'three', 'one', 'two', 'three', 'one', 'two', 'three', 'one', 'two', 'three', 'one', 'two', 'three', 'one', 'two', 'three']}
                    showsVerticalScrollIndicator={false}
                    initialListSize={4}
                    renderItem={_renderItem}
                    keyExtractor={(item, index) => '' + index}
                    ref={(ref) => { this.flatListRef = ref }}
                    getItemLayout={(data, index) => {
                        console.log("get item layout " + index)
                        return { length: 40, offset: 40 * index, index }
                    }}
                />
}

Expected behavior

getItemLayout only fires when scrollToIndex or similar methods are fired. Or at most when rows are actually re-rendering - though it doesn't look like it's used when simply rendering visible rows.

[react-native-bot]

    It looks like your issue may be missing some necessary information. Can you run `react-native info` and edit your issue to include these results under the **Environment** section?

If you believe this information is irrelevant to the reported issue, you may write [skip envinfo] under Environment to let us know.

[srameshr]

Even I experience this. getItemLayout gets triggered on scroll

[react-native-bot]

Have you been able to reproduce this on the latest release, 0.56?

[srameshr]

Have not tried it on 0.56. Im on 0.55

[react-native-bot]

I am closing this issue because it does not contain the necessary environment info, and there has been no followup in a while.

If you found this thread after encountering the same issue in the latest release, please feel free to create a new issue with up-to-date information by clicking here.

[newah]

@react-native-bot what environment info is missing? Provided it as requested, along with a detailed example and visuals to clearly understand the problem.

[newah]

@react-native-bot tested with 0.56. Issues still exists.

[srameshr]

@react-native-bot bad bot

[sesam]

the bot closed because of this: #20467 (comment)

(Maybe add a bot feature request that it should warn it might close the issue if the environment info is not filled in, OR not complain about that part when closing and just reference the issue being seemingly stale.)