Updating state with React and Websockets

Question

I'm working on a React app with websocket. In this app there is a socket event listener which returns 3 types: add, change, and remove. Certain state update operations will be performed based on the type received.

Do I properly mutate the users state? I'm not sure whether it follows the principle of React regarding updating states.

ws.on("connect", () => {
  console.log("connected");

  ws.emit("load");
});

ws.on("feed", response => {
  const prev = response.old_val;
  const next = response.new_val;
  const type = response.type;
  setUsers(users => {
    let currentUser = [...users];
    let index;
    switch (type) {
      case "add":
        return [...users, next];
      case "change":
        index = users.findIndex(u => u.id === next.id);
        currentUser[index].name = next.name;
        return currentUser;
      case "remove":
        index = users.findIndex(u => u.id === prev.id);
        currentUser.splice(index, 1);
        return currentUser;
      default:
        return currentUser;
    }
  });
});

Answer 1

This seems reasonable. The most important part is that you do not mutate the react state in-place. By doing let currentUser = [...users]; you copy the state and instead mutate the copy, then assign it as the updated state.

An alternative would be to use .map and .filter to make your changes. I see this pattern more often than the state copy approach.

Example:

ws.on("feed", response => {
  const { new_val: next, type } = response; // Use destructuring and inline renaming.

  setUsers(users => {
    switch (type) {
      case "add":
        return [...users, next];

      case "change":
        return users.map(u => {
          // Only change the user specified in the message
          if (u.id === next.id) return {...u, name: next.name } 
          return u;
          // or return users.map(u => u.id !== next.id ? u : ({...u, name: next.name})) if you prefer one-liners
        })

      case "remove":
        return users.filter(u => u.id !== next.id);

      default:
        return users;
    }
  });
});