Excessive number of pending callbacks: 501

[mezalejandro]

React Native version:

System: OS: macOS Mojave 10.14.6 CPU: (4) x64 Intel(R) Core(TM) i5-3210M CPU @ 2.50GHz Memory: 22.95 MB / 8.00 GB Shell: 3.2.57 - /bin/bash Binaries: Node: 10.15.1 - /usr/local/bin/node npm: 6.4.1 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman SDKs: iOS SDK: Platforms: iOS 12.2, macOS 10.14, tvOS 12.2, watchOS 5.2 Android SDK: API Levels: 22, 23, 24, 25, 26, 27, 28, 29 Build Tools: 27.0.3, 28.0.2, 28.0.3, 29.0.1, 29.0.2 System Images: android-23 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64, android-28 | Google Play Intel x86 Atom, android-28 | Google Play Intel x86 Atom_64 IDEs: Android Studio: 3.4 AI-183.6156.11.34.5692245 Xcode: 10.2.1/10E1001 - /usr/bin/xcodebuild npmPackages: react: 16.9.0 => 16.9.0 react-native: 0.61.5 => 0.61.5 npmGlobalPackages: react-native-cli: 2.0.1 react-native-git-upgrade: 0.2.7

Steps To Reproduce

Describe what you expected to happen:

Snack, code example, screenshot, or link to a repository:

[esensei]

Same problem

[madhums]

Seems to be occurring in async functions with awaiting promises. Here's a test

[superandrew]

same issue here, not sure why

[roger-ngx]

maybe firebase caused the problem ?

[kriscarle]

I had this error because I was looping and queuing hundreds of promises like

await Promise.all(filesToDownload.map(url => fetch(url)))

not the best plan... from the code it looks this warning is fired when there are more than 500 things pending in the message queue that hands runtime async calls off to the native code. (I'm new to this code so just a quick interpretation) https://github.com/facebook/react-native/blob/ce1703a84d2712a7df8f93a3f3ecbb2c04b72e57/Libraries/BatchedBridge/MessageQueue.js#L210

I ended up switching to Bluebird's Promise.map() function that has a concurrency option to limit how many promises are called at a time http://bluebirdjs.com/docs/api/promise.map.html#map-option-concurrency or you could use Async's mapLimit() https://caolan.github.io/async/v3/docs.html#mapLimit

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[rahamin1]

This happens to me with RN 0.62.2, and didn't happen to me on earlier versions of RN (I upgraded from 0.59.9).

Is this going to be fixed?

[rahulje9]

This is happening to me with RN 0.63.2. I was on 0.61.5 and updated packages just 2 weeks before and this is a big issue for us since we are in production.

Edit - I had updated all the packages including navigation. the app just hangs while navigating between the screen via bottom tab bar. everything was working fine in 0.61.5 and react-navigation 4.x

[savioserra]

Still experiencing this on v63.2 (react-navigation v5). Any updates?

[LcsGrz]

Still experiencing this on v63.2 (react-navigation v5). Any updates?

same issue

[brambang]

This happens to me with RN 0.62.2, and didn't happen to me on earlier versions of RN (I upgraded from 0.59.9).

Is this going to be fixed?

same with me. mine was 0.59.8 and upgrade to 0.61.5

so this is still no solution?

[brambang]

I had this error because I was looping and queuing hundreds of promises like

await Promise.all(filesToDownload.map(url => fetch(url)))

not the best plan... from the code it looks this warning is fired when there are more than 500 things pending in the message queue that hands runtime async calls off to the native code. (I'm new to this code so just a quick interpretation)

https://github.com/facebook/react-native/blob/ce1703a84d2712a7df8f93a3f3ecbb2c04b72e57/Libraries/BatchedBridge/MessageQueue.js#L210

I ended up switching to Bluebird's Promise.map() function that has a concurrency option to limit how many promises are called at a time http://bluebirdjs.com/docs/api/promise.map.html#map-option-concurrency or you could use Async's mapLimit() https://caolan.github.io/async/v3/docs.html#mapLimit

i dont think i have this in my code. but my screen had countdown. and after i tried disable the countdown, the warning is gone. So i found the source of this problem

my countdown is set in state for remaining minute & remaining second. so every second we update it by setState. i think it is a bug in RN.

[safaiyeh]

Hi all! Since activity popped up here again, could someone reproduce this on a fresh RN template? There are some hints that react-navigation is the root cause?

[github-actions[bot]]

:warning:	Missing Reproducible Example
:information_source:	It looks like your issue is missing a reproducible example. Please provide a Snack or a repository that demonstrates the issue you are reporting in a minimal, complete, and reproducible manner.

[brambang]

Hi all! Since activity popped up here again, could someone reproduce this on a fresh RN template? There are some hints that react-navigation is the root cause?

i use react navigation, but for me, i dont found any problem with that.

my screen had countdown, after i tried disable the countdown, the warning is gone. So i found the source of my problem

my countdown is set in state for remaining minute & remaining second. so every second we update it by setState.

_runCountdown = () => {
    this.myinterval = setInterval(() => {
      if (this.state.remainingSecond > 0) {
        this.setState({ remainingSecond: (this.state.remainingSecond - 1) });
      } else if (this.state.remainingMinute === 0) {
        clearInterval(this.myinterval); // STOP COUNTDOWN
        this._cancelOrder('ALL', 'ALERT', 'Pesanan Anda dibatalkan karena melewati batas waktu pemesanan'); // RUN CANCEL ORDER
      } else {
        this.setState({ remainingSecond: 59 });
        this.setState({ remainingMinute: (this.state.remainingMinute - 1) });
      }
    }, 1000);
  }

[SplinterStan]

Unfortunately, we have the same issue, but in our case its the @react-native-community/async-storage causing the excessive number of pending callback. But there is one very interesting thing: the issue doesn't come just from nowhere, it only happens, if we change the GoogleService-Info.plist to a different Firebase project or app bundle id.

Some more detailed repro:

1. We had used a certain firebase config in GoogleService-Info.plist for a long time, e.g. for the bundleID com.mycompany.ourfancyapp and the firebase project id our-fancy-app-dev.
2. Then, as we need to distribute the app to our client's private app store, we need to change the config to bundleID com.client.myapp and to a new Firebase project created to store specifically the client's data, e.g. projectID our-fancy-app-for-client-x.
3. As needed, we have registered a new bundleID within the new Firebase project and downloaded a new GoogleService-Info.plist file. But when we replaced the old firebase config file with the new one and ran the app, we could login using the new client-facing database, but after the login the whole app works, but it is extremely slow and nearly not usable (you have to click on an item 10 times and then wait for 2-3 minutes until it opens (sometimes it doesn't react at all)). In addition to that, the same error as described in this issue is shown, but for our case its showing a lot of RNCAsyncStorage pending callbacks:

4. The funny thing is, if we close the hanging app, move back the old GoogleService-Info.plist for the old dev bundleID and projectID, then the app is not lagging anymore and the error regarding pending callbacks doesn't appear at all! 🤯

We use the latest module versions, here some detailed info: react-native: 0.63.2 react: 16.13.1 @react-native-firebase/app: 8.4.4 @react-native-firebase/auth: 8.0.10 @react-native-firebase/firestore: 7.8.4 @react-native-firebase/messaging: 7.8.9 @react-native-community/async-storage: 1.12.0

Our team would really appreaciate, if some of you guys can find a solution for this issue soon. Because, otherwise we are going to lose our client as we can't deliver the app in time 😢 Thank you very much in advance! 👍

[safaiyeh]

Hi @SplinterStan i would recommend opening an issue with react native firebase.

[rahulje9]

I updated my React Native version from 0.63.2 to 0.63.3, with initial testing I'm not getting this error, I will update if I'm getting this error with 0.63.3

Update I'm still getting the error, but not as frequent as It was before and the app is usable.

[Badbreaddead]

@SplinterStan have you found a way to solve the problem? We have exactly the same problem

[Biplovkumar]

same here

[SplinterStan]

@Badbreaddead Yes, after 2 weeks of painful search we've found the issue! It was indeed in our application code! We are using Firebase Snapshots to subscribe to live changes in firesore collections. We have 2 of the subscriptions in 1 component running in series (if Subscription 1 emits a value, then we are unsubscribing from the 2nd subscription and resubscribe to it again), e.g.:

...
  let unsubscribeFromGroupDocument = () => { };
  let unsubscribeNewslettersCollection = () => { };

  useEffect(() => {
    // Subscribe to Group document changes.
    unsubscribeFromGroupDocument = subscribeCurrentGroup();
    return () => {
      unsubscribeFromGroupDocument();
      unsubscribeNewslettersCollection();
    };
  }, []);

  /**
   * Subscribes to the current group referenced in the user document.  
   */
  function subscribeCurrentGroup() {
    return firestore()
      .collection('groups')
      .doc(userDocument.groupId)
      .onSnapshot((groupDocument) => {
        if (loggedUser() && groupDocument.data()) {
          const groupDoc = groupDocument.data();
          setGroupDocument(groupDoc);
          persistDataInDevice('group', groupDoc);
          unsubscribeNewslettersCollection = subscribeToNewsletters(groupDoc);
        }
      }, () => {
        getPersistedDataFromDeviceMemory('group', true)
          .then((groupDoc) => {
            if (groupDoc) {
              setGroupDocument(groupDoc);
            }
          })
          .catch((error) => console.log('Error while getting group document data: ', error));
      });
  }

  /**
   * Subscribes to all newsletters in the newsletter collection.
   * @param {GroupDocument} groupDoc Firebase group document object of the user group.
   */
  function subscribeToNewsletters(groupDoc) {
    return firestore()
      .collection('newsletters')
      .onSnapshot((newslettersCollectionDocument) => {
        if (loggedUser() && newslettersCollectionDocument.docs.length > 0) {
          const newslettersCollection = newslettersCollectionDocument.docs.map(element => element.data());
          let allowedNewslettersLocal = newslettersCollection.filter((newsletterDoc) => groupDoc.newsletters.includes(newsletterDoc.id));
          persistDataInDevice('newsletters', allowedNewsletters);
          setAllowedNewsletters(allowedNewslettersLocal);
        }
      }, () => {
        getPersistedDataFromDeviceMemory('newsletters', true)
          .then((allowedNewsletters) => {
            if (allowedNewsletters) {
              setAllowedNewsletters(allowedNewsletters);
            }
          })
          .catch((error) => console.log('Error while getting newsletters collection data: ', error));
      });
  }

  /**
   * When a user group changes in the user document,
   * unsubscribes from active user group and newsletter collection subscriptions and subscribes anew.
   */
  function resubscribeToGroup() {
    unsubscribeFromGroupDocument();
    unsubscribeNewslettersCollection();
    unsubscribeFromGroupDocument = subscribeCurrentGroup();
  }

  return (
    <GroupDocumentProvider value={[groupDocument]}>
      <NewslettersProvider value={[allowedNewsletters]}>
        {
          userDocument && groupDocument && userDocument.groupId !== groupDocument.groupId && resubscribeToGroup()
        }
        <Stack.Navigator...

So, I don't exactly know which line of code caused the freeze/hanging issue, but I suppose that it was the infinite amount of resubscriptions done in the line userDocument && groupDocument && userDocument.groupId !== groupDocument.groupId && resubscribeToGroup(). As we are trying to cache the data from Firebase in the device memory using AsyncStorage, maybe there were asynchronity-related issues.

EDIT: I just tested the old code and this exactly function call resubscribeToGroup() is causing the issue! If I remove it, the app works flawlessly!

[Badbreaddead]

@SplinterStan thank you for the response. For me it also was the error in my code... Redundant dep in useEffect, which caused cycle with AsyncStorage.setItem calls

[gabimoncha]

@safaiyeh I think a better warning that points to the culprit would be useful. My project uses react-native 0.63.3 and react-native-maps 0.27.1 and I didn't find out yet where the problem is starting.

What I see common in all the comments is the fact that the developer doesn't know why this error is thrown.

[SplinterStan]

@gabrielmoncea Yeah, it would definitely help, if the error message would include at least the callback function that is still pending for execution.

[Soto92]

same problem. module: ReanimatedModule, method: getValue; module: RNC_AsyncSQLiteDBStorage, method: multiGet

[exotexot]

same problem. module UImanager method: measureLayout

Happens on iOS, macOS (Catalyst), Windows (react-native-windows). Not 100% about Android to be honest.

System: OS: macOS 10.15.7 CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz Memory: 8.00 GB / 32.00 GB Shell: 3.1.2 - /usr/local/bin/fish Binaries: Node: 14.13.1 - /usr/local/bin/node Yarn: Not Found npm: 6.14.8 - /usr/local/bin/npm Watchman: 4.9.0 - /usr/local/bin/watchman Managers: CocoaPods: 1.9.3 - /usr/local/bin/pod SDKs: iOS SDK: Platforms: iOS 14.2, DriverKit 20.0, macOS 11.0, tvOS 14.2, watchOS 7.1 Android SDK: API Levels: 29, 30 Build Tools: 29.0.2, 30.0.1 System Images: android-29 | Intel x86 Atom_64 Android NDK: Not Found IDEs: Android Studio: 4.0 AI-193.6911.18.40.6626763 Xcode: 12.2/12B45b - /usr/bin/xcodebuild Languages: Java: 1.8.0_265 - /usr/bin/javac Python: 2.7.16 - /usr/bin/python npmPackages: @react-native-community/cli: ^4.13.0 => 4.13.0 react: 16.11.0 => 16.11.0 react-native: 0.62.2 => 0.62.2 react-native-macos: Not Found npmGlobalPackages: react-native: Not Found

[hotaryuzaki]

This happens to me with RN 0.62.2, and didn't happen to me on earlier versions of RN (I upgraded from 0.59.9). Is this going to be fixed?

same with me. mine was 0.59.8 and upgrade to 0.61.5

so this is still no solution?

RN upgrade 16.13.1 the problem still exist

[SplinterStan]

This happens to me with RN 0.62.2, and didn't happen to me on earlier versions of RN (I upgraded from 0.59.9). Is this going to be fixed?

same with me. mine was 0.59.8 and upgrade to 0.61.5 so this is still no solution?

RN upgrade 16.13.1 the problem still exist

@hotaryuzaki Take a deeper look in your code. There is definitely something that is causing an infinite callback loop as it was in our case with Firebase subscriptions.

[hotaryuzaki]

This happens to me with RN 0.62.2, and didn't happen to me on earlier versions of RN (I upgraded from 0.59.9). Is this going to be fixed?

same with me. mine was 0.59.8 and upgrade to 0.61.5 so this is still no solution?

RN upgrade 16.13.1 the problem still exist

@hotaryuzaki Take a deeper look in your code. There is definitely something that is causing an infinite callback loop as it was in our case with Firebase subscriptions.

For me there is nothing to do with firebase, and I think the main problem not the firebase. In my case the problem is because countdown/timer using setInterval. When I disable the interval function the issue is gone.

[exotexot]

I'm also not using firebase at all i am being warned referencing module UImanager method: measureLayout. But I do have an interval in my logic. will have a deeper look here and report if i find anything. thanks for the hint.

Also, this issue isnt reliably reproducable in my case, which makes debugging more difficult.