Data coming in from socket doesn't update the state with useEffect - reactjs

Question

See demo here
I'm connecting to sockets (modelled by setTimeouts!) and getting an array. On mount I get an initial array. Then I keep listening for updates to the array. An update is sent as just the change and not a whole array.
I need to access the current state, but it's empty. Even though it looks fine in the render.
I think this might be a scoping or closure bug caused by numbers being empty at the time of calling addLater(), but I'm not sure what the solution is.
import React, { useEffect, useState } from "react";
import "./styles.css";
export default function App() {
const [numbers, setNumbers] = useState([]);
useEffect(() => {
// initial connection to socket
setNumbers(["first", "second", "third"]);
// incoming messages from socket
addLater();
addMuchLater();
}, []);
const addLater = () => {
window.setTimeout(() => {
console.log("Why is the state empty? ", numbers);
const changedNumbers = [...numbers];
changedNumbers.splice(1, 1, "fourth");
setNumbers(changedNumbers);
}, 5000);
};
const addMuchLater = () => {
window.setTimeout(() => {
const changedNumbers = [...numbers];
changedNumbers.splice(2, 1, "fifth");
setNumbers(changedNumbers);
}, 10000);
};
return (
<div className="App">
{numbers.map((r, i) => (
<p>
{i}: {r}
</p>
))}
</div>
);
}

Answer 1

When the next value depends on the previous one it's best to write the code as a functional update so the code will always be acting on the latest value. As you ran into, your current code closes over the original value of numbers, which isn't what you want:
const addLater = () => {
window.setTimeout(() => {
setNumbers(prevNumbers => {
const changedNumbers = [...prevNumbers];
changedNumbers.splice(1, 1, "fourth");
return changedNumbers;
});
}, 5000);
};
const addMuchLater = () => {
window.setTimeout(() => {
setNumbers(prevNumbers => {
const changedNumbers = [...prevNumbers];
changedNumbers.splice(2, 1, "fifth");
return changedNumbers;
});
}, 10000);
};

Answer 2

setState is asynchronous so the calls to state that happen in the functions later on get the state as it was when the component rendered, not as it is after the new state was set. You can use a callback function as the second argument:
useEffect(() => {
// initial connection to socket
setNumbers(["first", "second", "third"],
()=>{
// incoming messages from socket
addLater();
addMuchLater();
}), []);
See:
https://upmostly.com/tutorials/how-to-use-the-setstate-callback-in-react