My react native app will hang indefinitely without any API calls made

S

Spike LeeOP•7/10/25, 8:31 AM

Here is my checkUser function:

async function checkUser() {
    try {
      setLoading(true);
      const {
        data: { user },
        error,
      } = await supabase.auth.getUser();

      if (error) {
        console.error("Error checking user:", error);
        setLoading(false);
        return;
      }

      setUser(user);

      if (user) {
        const { data: profile, error: profileError } = await supabase
          .from("profiles")
          .select("*")
          .eq("uid", user.id)
          .single();

        if (profileError) {
          console.error("Error fetching initial profile:", profileError);
        } else {
          setProfile(profile);
        }
      }
    } catch (error) {
      console.error("Error in checkUser:", error);
    } finally {
      setLoading(false);
    }
  }

async function checkUser() {
    try {
      setLoading(true);
      const {
        data: { user },
        error,
      } = await supabase.auth.getUser();

      if (error) {
        console.error("Error checking user:", error);
        setLoading(false);
        return;
      }

      setUser(user);

      if (user) {
        const { data: profile, error: profileError } = await supabase
          .from("profiles")
          .select("*")
          .eq("uid", user.id)
          .single();

        if (profileError) {
          console.error("Error fetching initial profile:", profileError);
        } else {
          setProfile(profile);
        }
      }
    } catch (error) {
      console.error("Error in checkUser:", error);
    } finally {
      setLoading(false);
    }
  }

async function checkUser() {
    try {
      setLoading(true);
      const {
        data: { user },
        error,
      } = await supabase.auth.getUser();

      if (error) {
        console.error("Error checking user:", error);
        setLoading(false);
        return;
      }

      setUser(user);

      if (user) {
        const { data: profile, error: profileError } = await supabase
          .from("profiles")
          .select("*")
          .eq("uid", user.id)
          .single();

        if (profileError) {
          console.error("Error fetching initial profile:", profileError);
        } else {
          setProfile(profile);
        }
      }
    } catch (error) {
      console.error("Error in checkUser:", error);
    } finally {
      setLoading(false);
    }
  }

async function checkUser() {
    try {
      setLoading(true);
      const {
        data: { user },
        error,
      } = await supabase.auth.getUser();

      if (error) {
        console.error("Error checking user:", error);
        setLoading(false);
        return;
      }

      setUser(user);

      if (user) {
        const { data: profile, error: profileError } = await supabase
          .from("profiles")
          .select("*")
          .eq("uid", user.id)
          .single();

        if (profileError) {
          console.error("Error fetching initial profile:", profileError);
        } else {
          setProfile(profile);
        }
      }
    } catch (error) {
      console.error("Error in checkUser:", error);
    } finally {
      setLoading(false);
    }
  }

I

inder•7/10/25, 8:33 AM

This could be the reason https://discord.com/channels/839993398554656828/1372804114731368538/1372918789972430959

S

Spike LeeOP•7/10/25, 8:34 AM

Am I supposed to wrap it in setTimeout?

I

inder•7/10/25, 8:44 AM

You should not make onAuthStateChange callback async.

I

inder•7/10/25, 9:00 AM

Something like this

 useEffect(() => {
    setLoading(true);
    const getUser = async () => {
      const { data, error } = await supabaseClient.auth.getSession();
      const currentUser = data.session?.user;

      // handle any errors

      setUser(currentUser ?? null);
      setLoading(false);
    };
    getUser();
    
    const {data: { subscription }} = supabaseClient.auth.onAuthStateChange((_, session) => {
      setUser(session?.user ?? null);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []);

useEffect(()=>{
// if user is present then fetch profile here
},[user])

 useEffect(() => {
    setLoading(true);
    const getUser = async () => {
      const { data, error } = await supabaseClient.auth.getSession();
      const currentUser = data.session?.user;

      // handle any errors

      setUser(currentUser ?? null);
      setLoading(false);
    };
    getUser();
    
    const {data: { subscription }} = supabaseClient.auth.onAuthStateChange((_, session) => {
      setUser(session?.user ?? null);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []);

useEffect(()=>{
// if user is present then fetch profile here
},[user])

 useEffect(() => {
    setLoading(true);
    const getUser = async () => {
      const { data, error } = await supabaseClient.auth.getSession();
      const currentUser = data.session?.user;

      // handle any errors

      setUser(currentUser ?? null);
      setLoading(false);
    };
    getUser();
    
    const {data: { subscription }} = supabaseClient.auth.onAuthStateChange((_, session) => {
      setUser(session?.user ?? null);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []);

useEffect(()=>{
// if user is present then fetch profile here
},[user])

 useEffect(() => {
    setLoading(true);
    const getUser = async () => {
      const { data, error } = await supabaseClient.auth.getSession();
      const currentUser = data.session?.user;

      // handle any errors

      setUser(currentUser ?? null);
      setLoading(false);
    };
    getUser();
    
    const {data: { subscription }} = supabaseClient.auth.onAuthStateChange((_, session) => {
      setUser(session?.user ?? null);
    });

    return () => {
      subscription.unsubscribe();
    };
  }, []);

useEffect(()=>{
// if user is present then fetch profile here
},[user])

S

Spike LeeOP•7/10/25, 9:05 AM

would something like this be fine?

useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setLoading(true);
        setSession(session);
        setUser(session?.user || null);

        setLoading(false);
      }
    );

    const profileSubscription = REDACTED

    const spProfileSubscription = REDACTED

    return () => {
      if (authListener) authListener.subscription.unsubscribe();
      profileSubscription.unsubscribe();
      spProfileSubscription.unsubscribe();
    };
  }, []);

  useEffect(() => {
    const fetchProfiles = async () => {
      if (session?.user) {
        checkUser();

        try {
          // Fetch regular profile
          const { data: profileData, error: profileError } = await supabase
            .from("profiles")
            .select("*")
            .eq("uid", session.user.id)
            .single();

          if (profileError) {
            console.error("Error fetching profile:", profileError);
          } else {
            setProfile(profileData);
          }

          const { data: spData, error: spError } = await supabase
            .from("sp_profiles")
            .select("*")
            .eq("uid", session.user.id)
            .maybeSingle(); // This won't throw an error if no row is found

          if (spError) {
            console.error("Error fetching SP profile:", spError);
            setSPProfile(null);
          } else {
            setSPProfile(spData); // Will be null if no SP profile exists
          }
        } catch (error) {
          console.error("Error in auth state change:", error);
          setSPProfile(null); // Ensure SP profile is null on error
        }
      } else {
        // Reset states when no user is present
        setProfile(null);
        setSPProfile(null);
      }
    };

    fetchProfiles();
  }, [session]);

useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setLoading(true);
        setSession(session);
        setUser(session?.user || null);

        setLoading(false);
      }
    );

    const profileSubscription = REDACTED

    const spProfileSubscription = REDACTED

    return () => {
      if (authListener) authListener.subscription.unsubscribe();
      profileSubscription.unsubscribe();
      spProfileSubscription.unsubscribe();
    };
  }, []);

  useEffect(() => {
    const fetchProfiles = async () => {
      if (session?.user) {
        checkUser();

        try {
          // Fetch regular profile
          const { data: profileData, error: profileError } = await supabase
            .from("profiles")
            .select("*")
            .eq("uid", session.user.id)
            .single();

          if (profileError) {
            console.error("Error fetching profile:", profileError);
          } else {
            setProfile(profileData);
          }

          const { data: spData, error: spError } = await supabase
            .from("sp_profiles")
            .select("*")
            .eq("uid", session.user.id)
            .maybeSingle(); // This won't throw an error if no row is found

          if (spError) {
            console.error("Error fetching SP profile:", spError);
            setSPProfile(null);
          } else {
            setSPProfile(spData); // Will be null if no SP profile exists
          }
        } catch (error) {
          console.error("Error in auth state change:", error);
          setSPProfile(null); // Ensure SP profile is null on error
        }
      } else {
        // Reset states when no user is present
        setProfile(null);
        setSPProfile(null);
      }
    };

    fetchProfiles();
  }, [session]);

useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setLoading(true);
        setSession(session);
        setUser(session?.user || null);

        setLoading(false);
      }
    );

    const profileSubscription = REDACTED

    const spProfileSubscription = REDACTED

    return () => {
      if (authListener) authListener.subscription.unsubscribe();
      profileSubscription.unsubscribe();
      spProfileSubscription.unsubscribe();
    };
  }, []);

  useEffect(() => {
    const fetchProfiles = async () => {
      if (session?.user) {
        checkUser();

        try {
          // Fetch regular profile
          const { data: profileData, error: profileError } = await supabase
            .from("profiles")
            .select("*")
            .eq("uid", session.user.id)
            .single();

          if (profileError) {
            console.error("Error fetching profile:", profileError);
          } else {
            setProfile(profileData);
          }

          const { data: spData, error: spError } = await supabase
            .from("sp_profiles")
            .select("*")
            .eq("uid", session.user.id)
            .maybeSingle(); // This won't throw an error if no row is found

          if (spError) {
            console.error("Error fetching SP profile:", spError);
            setSPProfile(null);
          } else {
            setSPProfile(spData); // Will be null if no SP profile exists
          }
        } catch (error) {
          console.error("Error in auth state change:", error);
          setSPProfile(null); // Ensure SP profile is null on error
        }
      } else {
        // Reset states when no user is present
        setProfile(null);
        setSPProfile(null);
      }
    };

    fetchProfiles();
  }, [session]);

useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setLoading(true);
        setSession(session);
        setUser(session?.user || null);

        setLoading(false);
      }
    );

    const profileSubscription = REDACTED

    const spProfileSubscription = REDACTED

    return () => {
      if (authListener) authListener.subscription.unsubscribe();
      profileSubscription.unsubscribe();
      spProfileSubscription.unsubscribe();
    };
  }, []);

  useEffect(() => {
    const fetchProfiles = async () => {
      if (session?.user) {
        checkUser();

        try {
          // Fetch regular profile
          const { data: profileData, error: profileError } = await supabase
            .from("profiles")
            .select("*")
            .eq("uid", session.user.id)
            .single();

          if (profileError) {
            console.error("Error fetching profile:", profileError);
          } else {
            setProfile(profileData);
          }

          const { data: spData, error: spError } = await supabase
            .from("sp_profiles")
            .select("*")
            .eq("uid", session.user.id)
            .maybeSingle(); // This won't throw an error if no row is found

          if (spError) {
            console.error("Error fetching SP profile:", spError);
            setSPProfile(null);
          } else {
            setSPProfile(spData); // Will be null if no SP profile exists
          }
        } catch (error) {
          console.error("Error in auth state change:", error);
          setSPProfile(null); // Ensure SP profile is null on error
        }
      } else {
        // Reset states when no user is present
        setProfile(null);
        setSPProfile(null);
      }
    };

    fetchProfiles();
  }, [session]);

I

inder•7/10/25, 9:11 AM

I believe that inside your second useEffect calling checkUser() again is redundant as you already have a user when you check for

if(session?.user)

if(session?.user)

if(session?.user)

if(session?.user). Also inside useEffect dependencies, I'd use

[session.user]

[session.user]

[session.user]

[session.user] because session will update frequently whenever it is refreshed. But the user itself will remain same.

S

Spike LeeOP•7/10/25, 9:12 AM

Oh yes forgot to remove that, thank you

I

inder•7/10/25, 9:12 AM

Or if you're going to keep the user state, better to add

user

user

in useEffect dependencies instead of

session

session

I

inder•7/10/25, 9:13 AM

and directly check for

if (user)

if (user)

if (user)

if (user)

I

inder•7/10/25, 9:14 AM

And I'd not recommend to add setter for loading states inside onAuthStateChange

I

inder•7/10/25, 9:14 AM

This callback is called multiple times

S

Spike LeeOP•7/10/25, 9:15 AM

Oh I see

I

inder•7/10/25, 9:15 AM

You can set the default loading state to true and set it to false inside your fetchProfiles function

S

Spike LeeOP•7/10/25, 9:16 AM

Yea it's true by default

S

Spike LeeOP•7/10/25, 9:16 AM

It's fine if I have other subscriptions in the same useEffect that the onAuthStateChange is in?

I

inder•7/10/25, 9:18 AM

I didn't undertand. Show me a snippet what you're trying

S

Spike LeeOP•7/10/25, 9:22 AM

useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setSession(session);
        setUser(session?.user || null);
      }
    );

    const profileSubscription = supabase
      .channel("profile-updates")
      .on(
        "postgres_changes",
        {
          event: "UPDATE",
          schema: "public",
          table: "profiles",
          filter: user ? `uid=eq.${user.id}` : undefined,
        },
        async (payload) => {
          // Fetch the updated profile
          if (user) {
            const { data } = await supabase
              .from("profiles")
              .select("*")
              .eq("uid", user.id)
              .single();
            setProfile(data || null);
          }
        }
      )
      .subscribe();

    const spProfileSubscription = REDACTED
    return () => {
    // Same as previous
}, []);

  useEffect(() => {
    const fetchProfiles = async () => {
      // Same as previous
      }, [session]);

useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setSession(session);
        setUser(session?.user || null);
      }
    );

    const profileSubscription = supabase
      .channel("profile-updates")
      .on(
        "postgres_changes",
        {
          event: "UPDATE",
          schema: "public",
          table: "profiles",
          filter: user ? `uid=eq.${user.id}` : undefined,
        },
        async (payload) => {
          // Fetch the updated profile
          if (user) {
            const { data } = await supabase
              .from("profiles")
              .select("*")
              .eq("uid", user.id)
              .single();
            setProfile(data || null);
          }
        }
      )
      .subscribe();

    const spProfileSubscription = REDACTED
    return () => {
    // Same as previous
}, []);

  useEffect(() => {
    const fetchProfiles = async () => {
      // Same as previous
      }, [session]);

useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setSession(session);
        setUser(session?.user || null);
      }
    );

    const profileSubscription = supabase
      .channel("profile-updates")
      .on(
        "postgres_changes",
        {
          event: "UPDATE",
          schema: "public",
          table: "profiles",
          filter: user ? `uid=eq.${user.id}` : undefined,
        },
        async (payload) => {
          // Fetch the updated profile
          if (user) {
            const { data } = await supabase
              .from("profiles")
              .select("*")
              .eq("uid", user.id)
              .single();
            setProfile(data || null);
          }
        }
      )
      .subscribe();

    const spProfileSubscription = REDACTED
    return () => {
    // Same as previous
}, []);

  useEffect(() => {
    const fetchProfiles = async () => {
      // Same as previous
      }, [session]);

useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (_event, session) => {
        setSession(session);
        setUser(session?.user || null);
      }
    );

    const profileSubscription = supabase
      .channel("profile-updates")
      .on(
        "postgres_changes",
        {
          event: "UPDATE",
          schema: "public",
          table: "profiles",
          filter: user ? `uid=eq.${user.id}` : undefined,
        },
        async (payload) => {
          // Fetch the updated profile
          if (user) {
            const { data } = await supabase
              .from("profiles")
              .select("*")
              .eq("uid", user.id)
              .single();
            setProfile(data || null);
          }
        }
      )
      .subscribe();

    const spProfileSubscription = REDACTED
    return () => {
    // Same as previous
}, []);

  useEffect(() => {
    const fetchProfiles = async () => {
      // Same as previous
      }, [session]);

I

inder•7/10/25, 9:24 AM

have you tried to log the payload. I believe on postgres_changes it already has the updated data. No need to make another db call

S

Spike LeeOP•7/10/25, 9:29 AM

oh so I could just do

async (payload) => {setProfile(payload)}?

async (payload) => {setProfile(payload)}?

async (payload) => {setProfile(payload)}?

async (payload) => {setProfile(payload)}?

I

inder•7/10/25, 9:31 AM

I don't fully remember but I think payload is an object and updated data is present under a new key inside. Log it first to see the payload received. You can trigger the event by making changes in the table yourself.

Also no need to add async

S

Spike LeeOP•7/10/25, 9:32 AM

Oh great, thank you

S

Spike LeeOP•7/10/25, 9:33 AM

As for the original issue, I'll have to wait for a token refresh to see if the code works

S

Spike LeeOP•7/10/25, 9:34 AM

Thank you so much for your help though, this has been bugging me for too long

I

inder•7/10/25, 9:34 AM

You can reduce the token expiry in the dashboard for testing purposes.

I

inder•7/10/25, 9:35 AM

No less than 180 seconds though.

S

Spike LeeOP•7/10/25, 9:35 AM

Where do I do that?

S

Spike LeeOP•7/10/25, 9:36 AM

Oh found it

S

Spike LeeOP•7/10/25, 9:46 AM

Great, seems like it works, thank you!

I

inder•7/10/25, 10:08 AM

Did you check the payload received?

SSpike Lee ```typescript useEffect(() => { const { data: authListener } = supabase.auth...

I

inder•7/10/25, 10:13 AM

Just noticed another bug in this code
In the postgres_changes filter you have a ternary

user ? eq=...

user ? eq=...

user ? eq=...

user ? eq=...

This wont work because useEffect has no user dependency. It will always consider user as null

S

Spike LeeOP•7/10/25, 10:16 AM

You're right, should I put it in it's own useeffect with a user dependency?

I

inder•7/10/25, 10:16 AM

Yes

I

inder•7/10/25, 10:18 AM

And make early return from useEffect if no user is present. No need to add a subscription if no user is present.

S

Spike LeeOP•7/10/25, 10:22 AM

I've wrapped the subscriptions in an

if (user)

if (user)

if (user)

if (user) check, is that what you mean?

I

inder•7/10/25, 10:22 AM

You can make code cleaner by simply returning early like

if (!user) return

I

inder•7/10/25, 10:23 AM

Works the same, totally your preference

S

Spike LeeOP•7/10/25, 10:24 AM

Alright, and yes you were right the payload contains the updated date in

payload.new

payload.new

payload.new

payload.new

I

inder•7/10/25, 10:26 AM

Ya this is much better workflow

S

Spike LeeOP•7/10/25, 10:27 AM

Thank you man

S

Spike LeeOP•7/10/25, 10:31 AM

Now sometimes the app does a quick load every couple minutes.

useEffect(() => {
    const fetchProfiles = async () => {
      setLoading(true);
      if (session?.user) {
        // checkUser();

        try {
          // Fetch regular profile
          const { data: profileData, error: profileError } = await supabase
            .from("profiles")
            .select("*")
            .eq("uid", session.user.id)
            .single();

          if (profileError) {
            console.error("Error fetching profile:", profileError);
          } else {
            setProfile(profileData);
          }

          // Fetch SP profile - use maybeSingle() instead of single()
          const { data: spData, error: spError } = await supabase
            .from("sp_profiles")
            .select("*")
            .eq("uid", session.user.id)
            .maybeSingle(); // This won't throw an error if no row is found

          if (spError) {
            console.error("Error fetching SP profile:", spError);
            setSPProfile(null);
          } else {
            setSPProfile(spData); // Will be null if no SP profile exists
          }
        } catch (error) {
          console.error("Error in auth state change:", error);
          setSPProfile(null); // Ensure SP profile is null on error
        }
      } else {
        // Reset states when no user is present
        setProfile(null);
        setSPProfile(null);
      }
      setLoading(false);
    };

    fetchProfiles();
  }, [session]);

useEffect(() => {
    const fetchProfiles = async () => {
      setLoading(true);
      if (session?.user) {
        // checkUser();

        try {
          // Fetch regular profile
          const { data: profileData, error: profileError } = await supabase
            .from("profiles")
            .select("*")
            .eq("uid", session.user.id)
            .single();

          if (profileError) {
            console.error("Error fetching profile:", profileError);
          } else {
            setProfile(profileData);
          }

          // Fetch SP profile - use maybeSingle() instead of single()
          const { data: spData, error: spError } = await supabase
            .from("sp_profiles")
            .select("*")
            .eq("uid", session.user.id)
            .maybeSingle(); // This won't throw an error if no row is found

          if (spError) {
            console.error("Error fetching SP profile:", spError);
            setSPProfile(null);
          } else {
            setSPProfile(spData); // Will be null if no SP profile exists
          }
        } catch (error) {
          console.error("Error in auth state change:", error);
          setSPProfile(null); // Ensure SP profile is null on error
        }
      } else {
        // Reset states when no user is present
        setProfile(null);
        setSPProfile(null);
      }
      setLoading(false);
    };

    fetchProfiles();
  }, [session]);

useEffect(() => {
    const fetchProfiles = async () => {
      setLoading(true);
      if (session?.user) {
        // checkUser();

        try {
          // Fetch regular profile
          const { data: profileData, error: profileError } = await supabase
            .from("profiles")
            .select("*")
            .eq("uid", session.user.id)
            .single();

          if (profileError) {
            console.error("Error fetching profile:", profileError);
          } else {
            setProfile(profileData);
          }

          // Fetch SP profile - use maybeSingle() instead of single()
          const { data: spData, error: spError } = await supabase
            .from("sp_profiles")
            .select("*")
            .eq("uid", session.user.id)
            .maybeSingle(); // This won't throw an error if no row is found

          if (spError) {
            console.error("Error fetching SP profile:", spError);
            setSPProfile(null);
          } else {
            setSPProfile(spData); // Will be null if no SP profile exists
          }
        } catch (error) {
          console.error("Error in auth state change:", error);
          setSPProfile(null); // Ensure SP profile is null on error
        }
      } else {
        // Reset states when no user is present
        setProfile(null);
        setSPProfile(null);
      }
      setLoading(false);
    };

    fetchProfiles();
  }, [session]);

useEffect(() => {
    const fetchProfiles = async () => {
      setLoading(true);
      if (session?.user) {
        // checkUser();

        try {
          // Fetch regular profile
          const { data: profileData, error: profileError } = await supabase
            .from("profiles")
            .select("*")
            .eq("uid", session.user.id)
            .single();

          if (profileError) {
            console.error("Error fetching profile:", profileError);
          } else {
            setProfile(profileData);
          }

          // Fetch SP profile - use maybeSingle() instead of single()
          const { data: spData, error: spError } = await supabase
            .from("sp_profiles")
            .select("*")
            .eq("uid", session.user.id)
            .maybeSingle(); // This won't throw an error if no row is found

          if (spError) {
            console.error("Error fetching SP profile:", spError);
            setSPProfile(null);
          } else {
            setSPProfile(spData); // Will be null if no SP profile exists
          }
        } catch (error) {
          console.error("Error in auth state change:", error);
          setSPProfile(null); // Ensure SP profile is null on error
        }
      } else {
        // Reset states when no user is present
        setProfile(null);
        setSPProfile(null);
      }
      setLoading(false);
    };

    fetchProfiles();
  }, [session]);

I'm wondering if it's because of this useEffect which has the session dependency and the 3 minute JTW refresh?

I

inder•7/10/25, 10:32 AM

You're partially correct. It is happening because of short token expiry and this results in session state update which in turn calls fetchProfile in useEffect because session is a dependency. Either use session?.user in the dependency or directly user state

I

inder•7/10/25, 10:34 AM

Whenever token is refreshed the onAuthStateChange callback is called and in there setSession is called

I

inder•7/10/25, 10:35 AM

Even if you had a larger token expiry time, this would still cause loading to be triggered, because session state itself updates.

S

Spike LeeOP•7/10/25, 10:40 AM

is using session?.user the same as using just the user state as the dependency

I

inder•7/10/25, 10:55 AM

I think react only does shallow equality check. So if you only want to check for id and if user is present or not This should work fine.

S

Spike LeeOP•7/10/25, 11:00 AM

Alright thank you

I

inder•7/10/25, 11:01 AM

I'd still recommend to test it though.

I

inder•7/10/25, 11:03 AM

This is a great explanation in 1 min
https://m.youtube.com/shorts/qADQdrEKuJw

I

inder•7/10/25, 11:04 AM

As you're only using user id inside useEffect, better to simply add user.id in dependency array

My react native app will hang indefinitely without any API calls made

Similar Threads

Similar Threads

Similar Threads