How to listen for changes and update state?

 const { isLoading, user, error } = useUser();
 const [role, setRole] = useState(null);

  async function fetchRole() {
    const data = await supabaseClient
      .from("roles")
      .select("role")
      .eq("id", user?.id)
      .single();
    setRole(data?.data?.role);
  }

  useEffect(() => {
    fetchRole();
  }, [role]);