Infinite loop in react native hook - reactjs

Question

I'm working on a react native app.
In my main component, I use a UseEffect hook in order to store a database response in a 'food' varialbe. I will then create a list with the data contained in this variable.
There is my hook:
const [ food, setFood ] = useState([]);
const [listData, setListData] = useState([]);
const load_food = async () => {
db.listProduct().then(row => setFood(row))
setListData(
Array(food.length)
.fill('')
.map((_, i) => ({ key: `${i}`, product: `${food[i].PRODUCTNAME}`,
date: `${food[i].DATE}`,
uri: `${food[i].IMAGEURL}`,
id: `${food[i].IDPRODUCT}`})))
};
useEffect( () => { load_food(food) }, [food] );
But the problem is that this hook is called indefinitely. If I put a console.log('test') in the hook, the log will be infinite.
Because of that, my app is very laggy
From what I understood of similar problem, I must leave an empty array in my hook like this:
useEffect( () => { load_food(food) }, [] );
But by doing so, my list does not initialize.
I can't find a solution

Answer 1

useEffect( () => { load_food(food) }, [food] ); this is wrong, here you need to use props value to update the state rather than another state value to update the component, in place of [food] , make it [] and use below useEffect. I guess this should work otherwise please check the logic whether it's returning proper values when you are doing setListData call.
useEffect (() => {
db.listProduct().then(row => setFood(row))
setListData(
Array(food.length)
.fill('')
.map((_, i) => ({ key: `${i}`, product: `${food[i].PRODUCTNAME}`,
date: `${food[i].DATE}`,
uri: `${food[i].IMAGEURL}`,
id: `${food[i].IDPRODUCT}`})))
},[])

Answer 2

you can try this way
const [ food, setFood ] = useState([]);
const [listData, setListData] = useState([]);
const load_food = async () => {
const row = await db.listProduct();
setFood(row);
setListData(row.map(
(item,i) => ({
key: i,
product: item.PRODUCTNAME,
date: item.DATE,
uri:item.IMAGEURL,
id:item.IPRODUCT
})));
useEffect( () => { load_food() }, [] );

Answer 3

This is a late response, but nonetheless, I think it’s worth explaining.
The second argument you are passing, [food], is telling react to re-render every time the variable “food” is changed. The fact that your component is re-rendering infinitely means that “food” is constantly being changed. If you want a single call to load_food, you are correct when you mentioned that you should pass in a second argument or just [].
As a side note, I can’t test out the code, but my assumption is that this line:
db.listProduct().then(row => setFood(row))
is causing the infinite loop, as you are generating a new array and updating food infinitely, which is why load_food is being called infinitely.
My guess on why passing in [] doesn’t work is because you are updating the food state variable, and then immediately you are trying to use that food state variable, assuming that the state has been updated. setFood is an asynchronous function, meaning that you are not guaranteed to update the variable immediately. There are two fixes to this:
Set the initial food state to be whatever array you retrieve from your database. However, this would require you to retrieve from the database the first time the component is rendered, and that might not be what you are looking for.
Instead of updating food with whatever array you retrieve, store that array into some temporary variable (ex. db.listProduct().then(row => tmpArray). Then you can call setFood(tmpArray), updating your food variable, and then you can make your call to setListData using tmpArray instead of food, as tmpArray is guaranteed to be the array you want to use.