Setting an array to null and then updating it in useEffect React
If you want the same effect of the splicing you should use
setMeals(r.data.slice());
as otherwise the reference to r.data
is passed and it can make a difference if that object is mutated after the setMeals
call.
When you pass an array to a function in Javascript the function doesn't receive a copy of the array, but a reference to the original object you passed. For example:
let x = [1,2,3], y = null;
function foo(xx) {
y = xx;
}
foo(x);
console.log(y); // gives [1, 2, 3]
x[1] = 99;
console.log(y); // gives [1, 99, 3]
Apparently the code in fetchMeals
(that we don't see) reuses the r.data
array and this creates the problem if you don't make a copy. I would probably classify this as a (design) bug in fetchMeals
as given the interface I'd expect to get a fresh answer and not a reused one that I must copy.
Note also that
x.slice()
is the same as
[...x]
Here is an example (trying to mimic your code):
Stackblitz demo: https://stackblitz.com/edit/react-hooks-usestate-svnmpn?file=MealList.js
The problem is with data mutation, you have to remain immutable if you want new changes to re-render you component and apply the update.
const MealList = props => {
const [meals, setMeals] = useState([]);
useEffect(() => {
const fetchMeals = async (userId, fromDate, toDate, fromTime, toTime) => {
return await new Promise(res =>
setTimeout(
_ =>
res({
data: [
{ id: 1, name: "sphagetti" },
{ id: 2, name: "salad" },
{ id: 3, name: "soup" },
{ id: 4, name: "bacon and eggs" }
]
}),
2000
)
);
};
fetchMeals(1, "date1", "date2", "time", "time2").then(r =>
setMeals([...r.data])
);
}, [props]);
return (
<div style={{ width: "70%" }}>
{!meals.length && <p>wait 2 seconds...</p>}
{meals.map((meal, index) => (
<div key={meal.id} count={index + 1} meal={meal}>
{meal.id + ". " + meal.name}
</div>
))}
</div>
);
};