Full-Stack React Projects - Second Edition

Updating the view state with a new bid

Once the placed bid has been handled on the server, the updated auction containing the modified array of bids is sent to all the clients connected to the auction room. To handle this new data on the client-side, we need to update the Bidding component to add a listener for this specific socket message.

We will use an useEffect hook to add this socket listener to the Bidding component when it loads and renders. We will also remove the listener with socket.off() in the useEffect cleanup when the component unloads. This useEffect hook with the socket listener for receiving the new bid data will be added as follows.

mern-marketplace/client/auction/Bidding.js:

useEffect(() => { socket.on('new bid', payload ...