Getting many "Excessive number of pending callbacks: 501" errors

Just migrated from 1.1.7 to 2.0.10, and now (mostly triggered by scrolling in my experience so far) I’m getting this warning:

Warning: Please report: Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: {
"66781":{"module":"ReanimatedModule","method":"getValue"},
"66784":{"module":"ReanimatedModule","method":"getValue"},
"66787":{"module":"ReanimatedModule","method":"getValue"},
"66791":{"module":"ReanimatedModule","method":"getValue"},
"66794":{"module":"ReanimatedModule","method":"getValue"},
"66797":{"module":"ReanimatedModule","method":"getValue"},
"66800":{"module":"ReanimatedModule","method":"getValue"}, ...

I’m using

"react-native": "0.61.4",
"react-native-reanimated": "~1.4.0",
"react-native-gesture-handler": "~1.5.0",

with expo sdk 36 This is my list setup:

<DraggableFlatlist
  onRef={ref => (this.tasksList = ref)}
  style={{ flex: 1 }}
  data={tasks}
  initialNumToRender={10}
  keyExtractor={task => `${task.id}`}
  renderItem={this.renderItem}
  extraData={this.props}
  keyboardShouldPersistTaps="handled"
  onRefresh={this.onRefresh}
  refreshing={refreshing}
  ItemSeparatorComponent={() => <ItemSeparator projectView={projectView} />}
  onEndReached={this.fetchNextPage}
  onEndReachedThreshold={0.5}
  ListFooterComponent={this.renderFooter}
/>

...

renderItem = ({ item, index, drag, isActive }) => {
  const props = {
    key: item.id,
    task: item,
    onLongPress: drag,
    index,
    ...otherPropsOmittedForClarity
  }
  return (
    <View
      style={isActive ? styles.draggingRow : {}}
      pointerEvents={isActive ? 'none' : 'auto'}
    >
      <TaskRow {...props} />
    </View>
  )
}

Not sure if it’s related, but I am also getting a bunch of ## can't measure (key) reason: no ref for tasks after the initial 10 (I log the key if we’re trying to measure), and if I remove initialNumToRender I get in between 20-25 before the “can’t measure” shows up.

The list items are variably sized tasks, where TaskRow is a <View> wrapping an animated View with gesture handlers for swiping left/right. Other than that, the items are pretty straightforward, I don’t think I’m doing anything novel that warrants weird behavior like excessive pending callbacks.

Happy to provide more details as needed, I’m a huge reanimated fan so I’m very excited to see this library be written with it. Thanks for all your hard work!

[maks-io]

@eric-om when you call the renderItem in props just do something like

{ ...props, index: keyToIndex.get(itemKey) || listIndex }

Hi @dereknelson, could you maybe explain this with a little more context? I am currently running into similar issues and I am not able to completely follow your solution steps - would it be possible to see the entire file / code base - or is it a private app? Anyways - I would really appreciate your help!

Thanks!

[dereknelson]

@computerjazz not sure why I made it way more complicated than it had to be with the above solutions, I passed an “listIndex” where the index passed to the item is keyToIndex.get(itemKey) || listIndex