how to render parent component with children rendering promises

Question

i have a parent component returning a flatlist , renderItem of flatlist returns child component , that child component makes a an api call so the parent component should wait promise of every child. I have tried to handle that by creating a promise inside useeffect but this did not work , could you help ,here is my code this is from child component:

useEffect(() => {
   

    const promises = async () => {
      return await Promise.all([
        userFollowers(link)
          .then((datax) => {
            setUserFollower(datax);
            dispatch({
              type: 'GET_FOLLOWING',
              payload: datax,
            });
          })
          .catch((e) => e),
        userFollowing(item.item.followers_url)
          .then((datax) => {
            setFlwCounter(datax);
            dispatch({
              type: 'GET_FOLLOWERS',
              payload: datax,
            });
          })
          .catch((e) => e),
      ]);
    };
    return () => promises();
  }, [item, userFollower, flwCounter]);

the error it says :

Please report: Excessive number of pending callbacks: 501.

parent component here 's from where I call child component

  const renderItems = (item) => {
    return <UserItem item={item} />;
  };

score 0 · Answer 1 · answered Nov 04 '22 at 17:33

This question seems to be. a duplicate of this question: How to avoid "Excessive number of pending callbacks: 501" error during images download in React Native? I don't have enough reputation to put a comment.

You could also make your parent query the data for your children's components. Make an end point that takes a list of Ids and returns your 'followers' and the 'following' for each "UserItem" so you don't have so many calls happenings.

score 0 · Answer 2 · answered Nov 04 '22 at 17:43

You need to remove the variables userFollowers, flwCounter from the list of useEffect dependencies.

When your Promise is executed, the values of 2 state variables change, which leads to calling your functional component 2 times. since these variables are in the useEffect dependencies, this leads to calling Promise.all 2 more times, each of them will generate 4 updates and so on.

So you are causing a cyclical dependency.

useEffect(() => {
const promises = async () => {
  return await Promise.all([
    userFollowers(link)
      .then((datax) => {
        setUserFollower(datax);
        dispatch({
          type: 'GET_FOLLOWING',
          payload: datax,
        });
      })
      .catch((e) => e),
    userFollowing(item.item.followers_url)
      .then((datax) => {
        setFlwCounter(datax);
        dispatch({
          type: 'GET_FOLLOWERS',
          payload: datax,
        });
      })
      .catch((e) => e),
  ]);
};
return () => promises();
}, [item]);

If you need to do anything when changing the state of the variables userFollowers, flwCounter, the most correct way is to create separate useEffect

thanks @Swad for your help , now error is gone , but counters (followers , following) remains in default 0 — salmanaacvf, Nov 04 '22 at 17:51
@salmanaacvf What comes in the `datax` variable. You set the value of the variables to this value, and then you save it in the redux repository (if I understood correctly). Without knowing what the `userFollowers`, `userFollowing` functions do and what value is returned, it's hard to say what else you might not work as you expect along the way. — SwaD, Nov 04 '22 at 18:02

how to render parent component with children rendering promises

2 Answers2