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

Abbas Hussain · Accepted Answer · 2022-03-31 21:32:26Z

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

edited Mar 31, 2022 at 21:32

answered Mar 31, 2022 at 21:00

Abbas Hussain

1,3959 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ameny Bouzid Over a year ago

same issue! it stacks in Loading :(

Abbas Hussain Over a year ago

convert fetchData().then(()=>{ console.log('Loaded!') }); into fetchData() only

kkcc898 Over a year ago

Thanks @Abbas, this fixed the issue I have which is fetching data is always not ready when first render.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related