CODEWITHSUNDEEP
reactjsreact-nativeasync-awaitreact-reduxreact-native-fs
Oleksandr Fomin
Oleksandr Fomin

Reputation: 2366

How to avoid "Excessive number of pending callbacks: 501" error during images download in React Native?

I need to download a collection of images on button press. Currently, I'm doing it this way using react-native-fs: 

const downloadImageItem = async (imgUrl, id) => {
  const path = `${RNFS.DocumentDirectoryPath}/${id}.jpg`;

  RNFS.downloadFile({
    fromUrl: imgUrl,
    toFile: path,
  });
};

const downloadImages = async (items) => {
  for (const item of items) {
    if (item.images.length) {
      await downloadImageItem(item.images[0].thumb, item.images[0].id);
    }
  }
  return Promise.resolve();
};

Calling the function from my reducer for 3 types of items:

await downloadImages(items_one);
await downloadImages(items_two);
await downloadImages(items_three);

My issue is that sometimes I receive an error message that says: Excessive number of pending callbacks: 501

Is there a better way of doing the same thing, so that the error does not appear?

Upvotes: 9

Views: 36497

Answers (3)

Mariana Reis Silveira
Mariana Reis Silveira

Reputation: 311

I had the same issue; to me, it was because of a long chain of promises I had inside a component.

Once I moved the function to a different file the warning disappeared.

Upvotes: 0

Julio Orellana
Julio Orellana

Reputation: 97

Instead of using await inside for, try using for await

for await (variable of iterable) {
  sentence
}

const downloadImages = async (items) => {
  for await(const item of items) {
    if (item.images.length) {
      downloadImageItem(item.images[0].thumb, item.images[0].id);
    }
  }
  return Promise.resolve();
};

Upvotes: 1

emeraldsanto
emeraldsanto

Reputation: 4741

A similar issue was opened on the react-native repository in December 2019, it still hasn't been closed or addressed but I think you may find this comment useful.

The problem being described there is that queueing too many Promise calls can be problematic. The commenter suggested using a Promise utility function called Promise.map() which has concurrency control out of the box, from the bluebird library.

Upvotes: 9

Related Questions