React - setState in function gets executed X times - Updated - reactjs

Question

The bounty expires in 2 days. Answers to this question are eligible for a +50 reputation bounty.
Cinc-B is looking for an answer from a reputable source:
Fixing the re-render situation.
Quick Overview:
I have a context with meals in it. That meals gets used in the MealDetails-Component. In this component is a list filled with a certain amount of Food-Components. If you click on the X in the Food component it gets removed otherwise you go to the FoodDetailsPage
Then when I press the button a function called deleteFood gets executed which sets the meals state new without that food. The problem is that the setState inside the function doesn't get called once but twice in this component. I tried using it in 2 other components and once it executed only once and in the other it executed 4 times.
Update
My addFood function has a pretty similiar problem. But this one gets called in another component. It adds Food to 2 different states in 2 different contexts and in both contexts the added Value is doubled. One thing I could "find" was that the console in my browser prints the a certain value I console logged inside the setState function a second time, but not via the MealsContext, but via react_devtools_backend.js.
And this only happens with those 2 functions where I have an error.
Update 2
I'm displaying the Food-Components inside the MealsDetails Component which has meals in it which comes from the MealsContext. Could this be the problem?
Update 3
I missed saying it. I have a lot more functions in this MealsContext that are changing the state. One of them is called changeFoodWeight and it gets called in the same component where addFood gets called, but it doesn't show any problems plus the react_devtools_backend.js logs nothing which is great. I added the function to the MealsContext down below.
MealsDetails.tsx
const MealDetails = () => {
const navigate = useNavigate();
let { id } = useParams();
const { meals } = useMeals();
const style = { "--percentage": "75%" } as React.CSSProperties;
return (
<div className="MealDetails">
<header className="BarcodeScannerHeader">
<ArrowBackIcon
onClick={() => {
navigate("/");
}}
sx={{ fontSize: 35 }}
></ArrowBackIcon>
<div className="HeaderText">{meals.meals[Number(id)].name}</div>
</header>
<div className="MealDetailsContent">
<span className="label">{meals.meals[Number(id)].calories} ate</span>
<hr className="SolidMealDetails"></hr>
{meals.meals[Number(id)] != null
? meals.meals[Number(id)].food.map((food: any, index: number) => <Food key={index} food={food}/>)
: "Not loading"}
</div>
<Link className="Link" to={`/AddFood/${id!}`}>
<div className="MealDetailsAddFoodButton">
<img className="SVG" id="SVG" src={SVG} alt="+" />
</div>
</Link>
</div>
);
};
MealsContext.tsx
let initialState: MealsType = {
calories: 0,
carbs: 0,
meals: [
{
calories: 0,
carbs: 0,
food: []
}
],
};
const MealsProvider = ({ children }: any) => {
const [meals, setMeals] = useState<MealsType>(initialState);
const addFood = async (
id: number,
addedFood: FoodType,
selectedLocation: string,
date: Date
) => {
//Removed the fetch for readability
console.log("func")
setMeals((prevMeals) => {
console.log("state");
const updatedMeals = prevMeals;
let foodExists = false;
updatedMeals.calories += addedFood.kcal;
updatedMeals.carbs += addedFood.carbs;
updatedMeals.meals[id].calories += addedFood.kcal;
updatedMeals.meals[id].carbs += addedFood.carbs;
updatedMeals.meals[id].food.forEach((food : FoodType) => {
if(food.code === addedFood.code){
food.kcal += addedFood.kcal;
food.carbs += addedFood.carbs;
foodExists = true;
}
})
if(!foodExists){
updatedMeals.meals[id].food.push(addedFood);
}
return {...prevMeals,updatedMeals};
});
setUser(prevUser => {
const updatedStorage = prevUser.storage;
updatedStorage.map((storage : any) => {
if(storage.location === selectedLocation){
storage.storedFood.map((storedFood : any) => {
if(storedFood.code === addedFood.code){
storedFood.weight -= addedFood.weight;
}
})
}
})
return {...prevUser, updatedStorage};
})
};
const changeFoodWeight = async (
id: number,
foodDiff: any,
selectedLocation: string,
date: Date,
newWeight: number
) => {
//Removed the fetch for readability
console.log("func");
setMeals((prevMeals) => {
console.log("state");
const updatedMeals = prevMeals;
updatedMeals.calories += foodDiff.kcalDiff;
updatedMeals.carbs += foodDiff.carbsDiff;
updatedMeals.meals[id].calories += foodDiff.kcalDiff;
updatedMeals.meals[id].carbs += foodDiff.carbsDiff;
updatedMeals.meals[id].food.forEach((food) => {
if (food.code === foodDiff.code) {
food.kcal += foodDiff.kcalDiff;
food.carbs += foodDiff.carbsDiff;
}
});
return {...prevMeals,updatedMeals};
});
setUser(prevUser => {
const updatedStorage = prevUser.storage;
updatedStorage.map((storage : any) => {
if(storage.location === selectedLocation){
storage.storedFood.map((storedFood : any) => {
if(storedFood.code === foodDiff.code){
storedFood.weight -= foodDiff.weightDiff;
}
})
}
})
return {...prevUser, updatedStorage};
})
};
const deleteFood = (id: number, deletedFood: FoodType) => {
setMeals((prevMeals) => {
const updatedMeals = prevMeals;
updatedMeals.calories -= deletedFood.kcal;
updatedMeals.carbs -= deletedFood.carbs;
updatedMeals.meals[id].calories -= deletedFood.kcal;
updatedMeals.meals[id].carbs -= deletedFood.carbs;
for(let i = 0; i < updatedMeals.meals[id].food.length; i++){
if(updatedMeals.meals[id].food[i].code === deletedFood.code){
updatedMeals.meals[id].food.splice(i, 1);
}
}
return {...prevMeals,updatedMeals};
});
};
return (
<MealsContext.Provider
value={{
meals,
deleteFood
}}
>
{children}
</MealsContext.Provider>
);
};
const useMeals = () => useContext(MealsContext);
export { MealsProvider, useMeals };
};
Food.tsx
const Food = ({ food }: any) => {
const location = useLocation();
const {deleteFood} = useMeals();
return (
<Link className="FoodContent Link" to={`/FoodDetails/`} state= {{ food: food , location: location.pathname}} >
<div className="Food">
<div className="FoodDetail">
<div className="FoodNameFoodDelete">
<div className="FoodName">{food.name}</div>
<img className="FoodDelete SVG" onClick={(e : any) => {e.preventDefault(); deleteFood(parseInt(location.pathname[location.pathname.length - 1]), food)}} src={SVG}></img>
</div>
<div className="FoodGram-FoodKcal">
<div className="FoodBrand-FoodGram">
<div className="FoodBrand">{food.brand + ","} </div>
<div className="FoodGram">
{food.weight ? food.weight + " g" : 100 + " g"}{" "}
</div>
</div>
<div className="FoodKcal">{food.kcal} kcal</div>
</div>
</div>
<div className="FoodNutritions">
<div className="FoodNutrition">
<div className="FoodNutritionGrams">{Math.round(food.carbs*10)/10} g</div>
<div className="FoodNutritionText">Carbs</div>
</div>
<div className="FoodNutrition">
<div className="FoodNutritionGrams">{Math.round(food.protein*10)/10} g</div>
<div className="FoodNutritionText">Protein</div>
</div>
<div className="FoodNutrition">
<div className="FoodNutritionGrams">{Math.round(food.fat*10)/10} g</div>
<div className="FoodNutritionText">Fat</div>
</div>
</div>
</div>
</Link>
);
};

Answer 1

The issue stems from wrapping your entire component with a Link tag which is causing some internal state-collision between your setMeals call and the Link state pass.
<Link className="FoodContent Link" to={`/FoodDetails`} state= {{ food: food , location: location.pathname}}>
<div>Block-level Elements...</div>
</Link>
Link is an inline element and is simply meant to wrap some text (or a word) that's to be used as a link somewhere. The resulting view can then access the passed-in state.
From the React Router Link v6 documentation on how to handle passing state:
The state property can be used to set a stateful value for the new location which is stored inside history state. This value can subsequently be accessed via useLocation().
<Link to="new-path" state={{ some: "value" }} />
You can access this state value while on the "new-path" route:
let { state } = useLocation();
In your situation, the Link wrap is trying to passing the food state object into the entire Food component as you are updating your entire context state (useMeals).
To better visualize the problem, I reproduced your issue "before" and "after".
In the "before" sandbox, clicking Delete Cookies removes more items than anticipated due to this issue. In the "after" sandbox the same steps work as expected. This is because only the actual link is wrapped in Link.
Essentially, you need to use your Link wrap more like this so the state it's trying to pass doesn't overwrite the state that's in the component:
const Food = ({ food }: any) => {
const location = useLocation();
const {deleteFood} = useMeals();
return (
<div className="FoodContent">
<div className="Food">
<div className="FoodDetail">
<div className="FoodNameFoodDelete">
<Link className="FoodName Link" to={`/FoodDetails/`} state= {{ food: food , location: location.pathname}} >{food.name}</Link> {/* <--- Just wrap the actual link */}
<img className="FoodDelete SVG" onClick={(e : any) => {e.preventDefault(); deleteFood(parseInt(location.pathname[location.pathname.length - 1]), food)}} src={SVG}></img>
</div>
<div className="FoodGram-FoodKcal">
<div className="FoodBrand-FoodGram">
<div className="FoodBrand">{food.brand + ","} </div>
<div className="FoodGram">
{food.weight ? food.weight + " g" : 100 + " g"}{" "}
</div>
</div>
<div className="FoodKcal">{food.kcal} kcal</div>
</div>
</div>
<div className="FoodNutritions">
<div className="FoodNutrition">
<div className="FoodNutritionGrams">{Math.round(food.carbs*10)/10} g</div>
<div className="FoodNutritionText">Carbs</div>
</div>
<div className="FoodNutrition">
<div className="FoodNutritionGrams">{Math.round(food.protein*10)/10} g</div>
<div className="FoodNutritionText">Protein</div>
</div>
<div className="FoodNutrition">
<div className="FoodNutritionGrams">{Math.round(food.fat*10)/10} g</div>
<div className="FoodNutritionText">Fat</div>
</div>
</div>
</div>
</div>
);
};
Here are the sandboxes for reference:
"Before" Sandbox
"After" Sandbox