React useEffect issue… variable inside async function is getting a delayed updated value

Here is my code: I am trying to connect to supabase and i am getting a console 400 error twice but then it connects. It is due to userId variable, if i put the userId string i do not get the error. userId is being updated in a function just above this useEffect.

useEffect(() => {
async function example() {
try {

          const { data, error } = await supabase
          
            .from('profiles')
            .select()
            .eq('id', userId );
    
      };
     
      example();
    }, [userId]);

I added this at the bottom and it never connected.

if(userId) return: example()

Any ideas what i can do to avoid any console errors. I cant use conditions on hooks to avoid running useEffect with an empty string. Do i need to setup useProviders to set the variable outside of the component, that way the userId variable is set before the component is ran?

>Solution :

You must to check userId value availability at the beginning of your hook, try following edition :

useEffect(async () => {
    if (!userId) return;
    const { data, error } = await supabase
            .from('profiles')
            .select()
            .eq('id', userId );
}, [userId]);