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) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
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);