Async function in useEffect doesn't execute only when i'm rereshing the page

Question

I'm new in react! and I tried to search for a solution but unfortunately, I didn't have an answer. I'm trying to get profile data from an async function in useEffect, the first call of the component always doesn't show the data (it shows only the interface without the data ) and also doesn't show "loaded" in the console which I use it for testing, as the code shows. however, when I refresh the page all the data is loaded successfully
here's the code :

  const [profile, setProfile] = useState({});

useEffect(() => {

    async function fetchData() {
     try {
        /*some code to get the instance and account used is the function getProfile */
        const response = await instance.methods.getProfile(account[0]).call();
        setProfile(response.profile);
      } catch (error) {
        alert(
          `Failed`,
        );
        console.error(error);
      }
    }
    fetchData().then(()=>{ console.log('Loaded!') });

  });

what should I do ! if there is no solution ! how can refresh the component one it loaded ? or something like that

Answer 1

first, you need to useEffect dependencylist to only run after page render and every rerender you don't give dependencylist it will execute useEffect everytime when state update, the problem is when you first load page there is no data to show what why it's showing nothing because API need time to get data so you can show loader when API is making a call

  const [profile, setProfile] = useState({});
  const [loading, setLoading] = useState(true);

useEffect(() => {

    async function fetchData() {
     try {
        setLoading(true)
        /*some code to get the instance and account used is the function getProfile */
        const response = await instance.methods.getProfile(account[0]).call();
        setProfile(response.profile);
      } catch (error) {
        console.error(error);
      } finally {
        setLoading(false)
    }
    }
    fetchData();

  },[]);

  return loading ? <div>Loading....</div> : now show your component here