Hi there,

I'm relatively new to Next.js; I'm using Auth0 and Stripe in my application. Auth0's package provides a User context accross the application. The data inside of the User object is required for my stripe API call to obtain the users subscriptions. I'm making the call to the Stripe API and storing the result in the userSubscriptions state inside of the useEffect.

On page refresh, my application re-renders 4 times, and only on the 4th re-render does the subscription object populate as expected.

I'm wondering A: is this expected, B: I feel like there could be an issue down the line with it being assigned to undefined.

Any help on this would be greatly appreciated.

  useEffect(() => {
    console.log('yep');
    async function setUser() {
      if (user) {
        console.log('hi');
        setUserMetaData(
          user['https://icebreaker.app//user_metadata'] as MetaData
        );
      }
    }

    async function getSubscriptions(userMetaData: MetaData | undefined) {
      const subscriptions = await stripe.subscriptions.list({
        customer: userMetaData?.stripeCustomerId,
      });

      return subscriptions;
    }

    const fetchData = async () => {
      await setUser();

      if (userMetaData) {
        console.log('yes');
        const result = await getSubscriptions(userMetaData);
        setUserSubscriptions(result);
      } else {
        console.log('no');
      }
    };

    fetchData();
  }, [user]);