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

See original GitHub issue

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!

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:5
  • Comments:15 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
maks-iocommented, Aug 23, 2020

@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!

2reactions
dereknelsoncommented, Jan 13, 2020

@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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Excessive number of pending callbacks: 501 #27483 - GitHub
This issue is occuring because you are using useEffect in many functions to check for every change in state. Reduce this number and...
Read more >
How to avoid "Excessive number of pending callbacks
The problem being described there is that queueing too many Promise calls can be problematic. The commenter suggested using a Promise ...
Read more >
[Resolve]-Excessive number of pending callbacks
In my react-native project, I am getting the following error message: Warning: Please report: Excessive number of pending callbacks: 501.
Read more >
react-native-track-player/Support - Gitter
Warning: Please report: Excessive number of pending callbacks: 501. Some pending callbacks that might have leaked by never being called from native code: ......
Read more >
501” error during images download in React Native – iTecNote
Reactjs – How to avoid “Excessive number of pending callbacks: 501” error ... The problem being described there is that queueing too many...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found