Values won't appear in the state(react) - reactjs

Question

SOS! Here i have favourite meals from local storage assigned to favs state. I then use my favs to fetch a meal for each favs value. My favs state updates on initial render, but fetchedMeals is not. It updates only after SECOND render. It seems that i have problem somewhere with async function. Would appreciate any help. Will provide with more details immediately if needed.
import React from 'react';
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import NavBar from '../Home/NavBar';
function Favourites() {
const [favs, setFavs] = useState([]);
const [fetchedMeals, setFetchedMeals] = useState([]);
const getFavsFromLs = () => {
let itemsFromLs = JSON.parse(localStorage.getItem('favs')) || [];
setFavs(itemsFromLs);
};
const fetchMeal = async (mealName) => {
const linkByMealName = `https://www.themealdb.com/api/json/v1/1/search.php?s=${mealName}`;
const res = await fetch(linkByMealName);
const meal = await res.json();
return meal.meals[0];
};
const getFavMeals = async () => {
let items = [];
for (let i = 0; i < favs.length; i++) {
fetchMeal(favs[i]).then((res) => items.push(res));
}
setFetchedMeals(items);
};
useEffect(() => {
getFavsFromLs(); //Moved getFavMeals to another useEffect
}, []);
useEffect(() => {// New use effect that listens favs
if (favs && favs.length) {
getFavMeals();
}
}, [favs]);
return (
<>
<NavBar />
<section className="section">
<div className="row">
<div className="container col l12">
{fetchedMeals.map((meal) => {
const { strMeal, strMealThumb, idMeal } = meal;
return (
<Link to={`/favourites/${strMeal}`}>
<div class="col s12 m6 l3" key={idMeal}>
<div class="card">
<div class="card-image">
<img src={strMealThumb} alt="img"></img>
</div>
<div class="card-content">
<h5 className="truncate center">{strMeal}</h5>
</div>
</div>
</div>
</Link>
);
})}
</div>
</div>
</section>
</>
);
}
export default Favourites;

Answer 1

Since setting state is an asynchronous you need to make useEffect for favs and when they are set from localStorage you can make that getFavMeals and at that point favs will have data.
Also doing console.log immediately after setting state will also show old value, because it needs to rerender. You are trying also on console.log(fetchedMeals).
import React from 'react';
import { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import NavBar from '../Home/NavBar';
function Favourites() {
const [favs, setFavs] = useState([]);
const [fetchedMeals, setFetchedMeals] = useState([]);
const getFavsFromLs = () => {
let itemsFromLs = JSON.parse(localStorage.getItem('favs')) || [];
setFavs(itemsFromLs);
};
const fetchMeal = async (mealName) => {
const linkByMealName = `https://www.themealdb.com/api/json/v1/1/search.php?s=${mealName}`;
const res = await fetch(linkByMealName);
const meal = await res.json();
console.log(meal.meals[0]);
return meal.meals[0];
};
const getFavMeals = async () => {
let items = [];
for (let i = 0; i < favs.length; i++) {
fetchMeal(favs[i]).then((res) => items.push(res));
}
setFetchedMeals(items);
console.log(fetchedMeals);
console.log(items);
};
useEffect(() => {
getFavsFromLs(); //Moved getFavMeals to another useEffect
}, []);
useEffect(() => {// New use effect that listens favs
if (favs && favs.length) {
getFavMeals();
}
}, [favs]);
return (
<>
<NavBar />
<section className="section">
<div className="row">
<div className="container col l12">
{fetchedMeals &&
fetchedMeals.map((meal) => {
console.log(meal);
const { strMeal, strMealThumb, idMeal } = meal;
console.log(meal);
return (
<Link to={`/favourites/${strMeal}`}>
<div class="col s12 m6 l3" key={idMeal}>
<div class="card">
<div class="card-image">
<img src={strMealThumb} alt="img"></img>
</div>
<div class="card-content">
<h5 className="truncate center">{strMeal}</h5>
</div>
</div>
</div>
</Link>
);
})}
</div>
</div>
</section>
</>
);
}
export default Favourites;