CODEWITHSUNDEEP
javascriptreact-hooksuse-effectreact-usememo
MCLarge
MCLarge

Reputation: 45

How can i wait for a value to be set from useEffect?

We are using useMemo and useEffect when fetching an array of data. In the first file im setting a const with results from the hook (second file). But the results gets set twice and the first time the result is an empty object.

I would need it to be set after the useEffect has done its job.

We have 2 js files

First.js

const dataArray = useGetDataArray({ name, id });
console.log("Data Array: ", dataArray);

Second.js

export const useGetDatArray = ({ name, id } = {}) => {
  const [data, setData] = useState({});

  const index = useMemo(() => {
    console.log("in useMemo");
    const client = thirdPartyProvider;

    return client;
  }, []);

  useEffect(() => {
    console.log("in useEffect");
   
    index
      .search(name, {
        numberOfResults: 12,
      })
      .then(res => setData(_.get(res, "result")));
  }, [index]);

  return data;
};

My console looks like this

"in useMemo "
"Data Array:"  Object {  }
"in useEffect" 
"Data Array:" Array(12) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

This is how i would like if possible

"in useMemo" 
"in useEffect" 
"Data Array:" Array(12) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]

Upvotes: 0

Views: 1469

Answers (1)

Waleed Ahmad Qureshi
Waleed Ahmad Qureshi

Reputation: 114

First.js

useEffect(async () => {
  await useGetDataArray({ name, id });
  const dataArray = myContainer.data;
  console.log("Data Array: ", dataArray);
}, []);

Second.js

export const useGetDatArray = ({ name, id } = {}) => {
  const index = useMemo(() => {
    console.log("in useMemo");
    const client = thirdPartyProvider;

    return client;
  }, []);

  useEffect(async () => {
    console.log("in useEffect");
    await myContainer.getData(index, name);
  }, [index]);
};

Container.js

function myContainer(){
  const [data, setData] = useState({});

  const getData = async (index, name) => {
    const indexData = await index.search(name, { numberOfResults: 12 });
    if (indexData) {
        await setData(indexData);
    }
  }

  return { data, getData };
}
export const MyContainer = createContainer(myContainer);

Upvotes: 1

Related Questions