Obtuve un comportamiento extraño en mi aplicación para seleccionar servicios en una página. La lógica completa no es relevante ya que logré solucionarlo, pero no entiendo por qué lo cambié lo solucionó.

Guardo los servicios seleccionados en una variable de estado:

 const [selectedServices, setSelectedServices] = useState({});

Entonces estaba en un controlador de eventos actualizándolos así:

 let newServices = { ...selectedServices, ...toChange }; setSelectedServices(newServices);

Esto me dio un comportamiento extraño que generalmente ocurre cuando estoy mutando el valor del estado actual en lugar de crear un nuevo objeto. Jugué un poco con él y lo cambié a esto:

 setSelectedServices((prev) => { return { ...prev, ...toChange } });

Esto lo arregló, ahora funciona como se esperaba, pero no tengo idea de por qué.

newServices se crea con el operador de propagación, por lo que debería ser un objeto nuevo. Supongo que hay alguna diferencia con el alcance o algo que hace que los cambios funcionen mejor, pero no lo entiendo.

Alguien me puede explicar la diferencia entre asignar de estas 2 formas?