how to render parent component with children rendering promises-CodePudding

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} />;
  };

CodePudding user response：

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.

CodePudding user response：

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