How to set order of functions execution inside useEffect hook - reactjs

Question

I need the useProductList function to execute and finish all process before randomProduct function will execute.
For some reason it doesnt work when fetchData is a Promise so randomProduct wont be executed.
I even tried without Promise, nothing did work.
my custom hook
import { useState, useEffect } from "react";
export default function useProductList() {
const [productList, setProductObjsList] = useState([]);
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
let randomProducts = [];
const fetchData = () =>
new Promise(() => {
arr.splice(1, 7);
setProductObjsList(arr);
return arr;
});
const randomProduct = (productArr) => {
//some Math.random() and algorithm with the productArr
console.log("randomProduct()", productArr);
};
useEffect(() => {
fetchData().then((result) => randomProduct(result));
}, []);
return randomProducts;
}
CodeSandbox
I will be glad if someone will open my eyes and show me the right way of how to do it.
EDIT:
My original fetchData function
const fetchData = () =>
{
fetch('http://localhost:49573/WebService.asmx/ProductList')
.then((response) => response.text())
.then(
(xml) =>
new window.DOMParser().parseFromString(xml, 'text/xml')
.documentElement.firstChild.textContent
)
.then((jsonStr) => JSON.parse(jsonStr))
.then((data) => {
setProductObjsList(data);
})
});
randomProduct function
```const randomProduct = (productObjectList) => {
const products = [...productObjectList];
for (let index = 0; index < products.length; index++) {
let idx = Math.floor(Math.random() * products.length);
randomProducts.push(products[idx]);
products.splice(idx, 1);
}
};```

Answer 1

It's unclear what your exact intentions are, but from the name useRandomProduct I'm going to make a guess. Top things I'd like for you to take from this answer -
You cannot mutate state in React. You cannot use Array.prototype.pop and expect your React components to work correctly. If a value is meant to change over the lifetime of the component, use useState.
Don't put all of your functions inside of the hook. This tendency probably comes from class-oriented thinking but has no place in functional paradigm. Functions can be simple and do just one thing.
import { useState, useEffect } from "react"
// mock products
const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]
// mock fetch
const fetchData = () =>
new Promise(resolve => {
resolve(arr)
})
// random picker
function choose1(all) {
const i = Math.floor(Math.random() * all.length)
return all[i]
}
export default function useRandomProduct() {
// state
const [product, setProduct] = useState(null)
// effect
useEffect(async () => {
// fetch products
const products = await fetchData()
// then choose one
setProduct(choose1(products))
}, [])
// return state
return product
}
To use your new hook -
import { useRandomProduct } from "./useRandomProduct.js"
import Product from "./Product.js"
function MyComponent() {
const product = useRandomProduct()
if (product == null)
return <p>Loading..</p>
else
return <Product {...product} />
}
Full demo -
const { useState, useEffect } = React
// useRandomProduct.js
const arr = [{name:"apple"},{name:"carrot"},{name:"pear"},{name:"banana"}]
const fetchData = () =>
new Promise(r => setTimeout(r, 2000, arr))
function choose1(all) {
const i = Math.floor(Math.random() * all.length)
return all[i]
}
function useRandomProduct() {
const [product, setProduct] = useState(null)
useEffect(() => {
fetchData().then(products =>
setProduct(choose1(products))
)
}, [])
return product
}
// MyComponent.js
function MyComponent() {
const product = useRandomProduct()
if (product == null)
return <p>Loading..</p>
else
return <div>{JSON.stringify(product)}</div>
}
// index.js
ReactDOM.render(<div>
<MyComponent />
<MyComponent />
<MyComponent />
</div>, document.querySelector("#main"))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="main"></div>

Answer 2

The problem is you are not resolving the promise. So, until the promise is resolved it will not go inside then() block.
Here's what you have to do
const fetchData = () =>
new Promise((resolve,reject) => {
arr.pop(1, 7);
setProductObjsList(arr);
resolve(arr);
});
A promise has three stage.
Pending
Resolved
Rejected
In your example the promise is always in pending state and never goes to the Resolved state. Once, a promise is resolved it moves to then() block and if it is rejected it moves to catch() block.