state inside useEffect refers the initial state always with React Hooks
Since you have written your useEffect to execute on initial mount of component, it creates a closure which references the initial value of messages and even if the messages update, it will still refer to the same value on subsequent calls
You should instead configure the useEffect to run on initial mount and messages change
export function useChat() { const [messages, setMessages] = useState([]); useEffect(() => { const socket = openSocket("http://localhost:3003"); socket.on("chat message", msg => { const newState = update(messages, { $push: [msg] }); setMessages(newState); }); }, [messages]); return { messages };} or else you could use the callback pattern to update state
export function useChat() { const [messages, setMessages] = useState([]); useEffect(() => { const socket = openSocket("http://localhost:3003"); socket.on("chat message", msg => { setMessages(prevMessages => update(prevMessages, { $push: [msg] });); }); }, []); return { messages };}