1

I am trying to render 2 methods on useEffect but the problem is they both get rendered but somehow the method which gets rendered at 2nd place replaces the content of first method

In short: I am only getting output of 2nd method, first method's output is watchable for a sec then dissapears

I tried it on 2 ways -

1st way -

 useEffect(() => {
    getPages();
    getFeatures();
  }, []);

I am getting result of only getFeatures(), getPages() dissapears() after a sec..

2nd way -

  useEffect(() => {
    getFeatures();
    console.log("featFeatures");
  }, []);
  useEffect(() => {
    getPages();
    console.log("getPages");
  }, []);

Same here, I am getting both console logs but result of only 2nd UseEffect, 1st UseEffect result gets dissapear after 2nd useEffect runs

Any Solution for this guys?

getPage() -

 const getPages = async () => {
    await getAllPagesFromUser(pageSkip, pageLimit, token).then((data) => {
      if (data.error) {
        console.log(data.error);
      } else {
        setValues({ ...values, pages: data });
      }
    });
  };

GetFeatures()-

  const getFeatures = () => {
    getAllFeaturesFromUser(featureSkip, featureLimit, token).then((data) => {
      if (data.error) {
        console.log(data.error);
      } else {
        setValues({ ...values, features: data });
      }
    });
  };
Rohan Srivastava
  • 45
  • 6

1 Answers1

0

It is because both functions trying to set state at the same time.

you can do this,

const loadData = async ()=>{
  await getPages();
  getFeatures();
}

and update useEffect

useEffect(() => {
    loadData()
  }, []);
Arjun
  • 1,181
  • 1
  • 1
  • 7