Cuando se hace la llamada a `setUser` de esta forma: const cambiarUser = (_campo: string, _valor: any) => { setUser({ ...user, [_campo]: _valor }); } function handler(){ cambiarUser("num_seguidores", user.num_seguidores + 1); } ReactJS toma la última captura en `scope` para el estado `user`: { nombre: "Luis", num_seguidores: 0, siguiendo: false } Se actualiza el estado para `num_seguidores` y reactJS devuelve el componente. Hasta aquí afirmamos nuestro conocimiento de la devolución de componentes, despues de actualizar un estado: {nombre: "Luis", num_seguidores: 1, siguiendo: false} ***** <h3>La captura de user no ha cambiado, ReactJS aún no devuelve</h3> Pero, cuando se hace la llamada a `setUser` en multiples ocaciones dentro del mismo scope `handler`, JS no espera a que el primer `cambiarUser->setUser`(operación asincrónica) regrese de la lista de tareas con el state `user` actualizado (nueva captura), para luego ejecutar el siguiente `cambiarUser->setUser`y así sucesivamente... **No**, JS continua su ejecución... Mas detalles en los comentarios a continuación: function handler(){ cambiarUser("num_seguidores", user.num_seguidores + 1); //ReactJS: cambiarUser scheduled asycn op in task queue //Current state in handler scope ->prevState //{nombre: "Luis", num_seguidores: 0, siguiendo: false} //JS : aun no regreso, continuo cambiarUser("nombre", "Luiss"); //ReactJS: cambiarUser scheduled asycn op in task queue //Current state in handler scope ->prevState //{nombre: "Luis", num_seguidores: 0, siguiendo: false} //JS: aun no regreso continuo cambiarUser("siguiendo", true); //ReactJS: cambiarUser scheduled asycn op in task queue //Current state in handler scope ->prevState //{nombre: "Luis", num_seguidores: 0, siguiendo: false} //JS: ya no hay nada, regresa funcion handler al call stack //ejecucion de async scheduled tasks //ReactJS: ejecuto cambiaUser para num_seguidores:1 //prevState: captura actual en este scope //{nombre: "Luis", num_seguidores: 0, siguiendo: false} //newState //{nombre: "Luis", num_seguidores: 1, siguiendo: false} //ReactJS: ejecuto cambiaUser para nombre:Luiss //prevState: captura actual en este scope //{nombre: "Luis", num_seguidores: 0, siguiendo: false} //newState //{nombre: "Luiss", num_seguidores: 0, siguiendo: false} //ReactJS: ejecuto cambiaUser para siguiendo:true //prevState: captura actual en este scope //{nombre: "Luis", num_seguidores: 0, siguiendo: false} //newState //{nombre: "Luis", num_seguidores: 0, siguiendo: true} } Nótese que hasta este punto, el estado `user` (`prevState`) no ha cambiado, **la captura de `user` sigue siendo la misma que al inicio de la `App` durante la ejecución de las operaciones asincrónicas `cambiaUser->setUser`, JS sigue en el mismo scope `handler` y ReactJS aún no devuelve** aquí: cambiarUser("siguiendo", true); //JS hanlder: esto es lo que tengo capturado en memoria para user, pues no he devuelto //user = {nombre: "Luis", num_seguidores: 0, siguiendo: false} //... const cambiarUser = (_campo: string, _valor: any) => { setUser({ ...user, [_campo]: _valor //siguiendo: true }); } Por lo tanto, como resultado se obtiene: {nombre: "Luis", num_seguidores: 0, siguiendo: true} ***** <h3>Functional Updates</h3> Una forma de hacer que este diseño, con propiedad computada ES6 funcione, es usando el hook `useState` en su version callback para [functional updates](https://reactjs.org/docs/hooks-reference.html#functional-updates), el cual nos permite obtener la captura del estado previo, modificar y regresar su nuevo estado para llamadas consecutivas al setter `setState` . Para regresar el nuevo estado, dado que es un objeto, se usa el operador elipsis. Dejo una demostración: <!-- begin snippet: js hide: false console: true babel: true --> <!-- language: lang-js --> function App(){ const [state,setState] = React.useState({nombre: "Luis", num_seguidores: 0, siguiendo: false}) const cambiarUser = (_campo, _valor) => { //version callback del setter de useState setState(prevState => { return {...prevState, [_campo]: _valor} }) } function handler(){ cambiarUser("num_seguidores", state.num_seguidores + 1); cambiarUser("nombre", "Luiss"); cambiarUser("siguiendo", true); } console.log("state is", state) return <button onClick={handler}>Click me</button> } ReactDOM.render(<App/>, document.getElementById('root')) <!-- language: lang-html --> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script> <div id="root"></div> <!-- end snippet --> **** <h3>Actualización</h3> >Aunque no comprendo del todo la lógica cuando usaste useReducer En la documentación de reactJS se recomienda usar el hook `useReducer` para casos de este típo. El Hook `useReducer` puede configurarse de diferentes formas, el patrón mas común es usar una función `reducer`, la cual recibirá dos argumentos, el `state` (enviado implícitamente) y un objeto `action`. Pero, para este caso de uso, en vez de `action` se va a pasar el cambio de estado, en su forma propiedad computada `[property]:value` como `newState`: function reducer(state, newState){ //... } Luego, como el cambio de estado `newState` es un objeto con una sola propiedad computada, se debe buscar la forma de obtener el nombre de la propiedad, para poder cambiar su nuevo valor en la estructura del objeto `state`. Se propone el operador `elipsis`, para actualizar propiedades del objeto `state` durante una operación de propagación: //la propagacion regresa el estado, mas un nuevo objeto //simulando la propagacion //{nombre: "Luis", num_seguidores: 0, siguiendo: false, {[property]:value}} return {...state, newState} En el ejemplo anterior, se esta regresando el objeto `state`, buscando que durante la iteración con el operador `elipsis`, `JS` vea la propiedad y cambie su valor; pero la propiedad computada se inserta como un objeto durante la iteración, mutando el objeto `state`. (función reducer impura) Una solución a este problema, es propagar el objeto `newState`, que solamente tiene un parametro; de esta forma `JS` identifica el parametro durante la iteración y cambia su valor, regresando la estructura `state` original (función reducer pura): //la propagacion regresa el estado y solo modifica //el valor de la propiedad en newState //simulando la propagacion //{nombre: "Luis", num_seguidores: 0, siguiendo: false, siguiendo: true} //la propiedad siguiendo tiene un nuevo valor, se actualiza //{nombre: "Luis", num_seguidores: 0, siguiendo: true} return {...state, ...newState} Se propone esta función `reducer` con operador `elipsis`, porque en tu diseño original estas usando propiedades computadas ES6. Dejo la demostración para que quede documentado: <!-- begin snippet: js hide: false console: true babel: true --> <!-- language: lang-js --> function reducer(state, newState){ return {...state, ...newState}; } const initState = { nombre: "Luis", num_seguidores: 0, siguiendo: false } function App(){ const [state, setState] = React.useReducer( reducer, initState ); const cambiarUser = (_campo, _valor) => { setState({ [_campo]: _valor }) } function handler(){ cambiarUser("num_seguidores", state.num_seguidores + 1); cambiarUser("nombre", "Luiss"); cambiarUser("siguiendo", true); } console.log("state is", state) return <button onClick={handler}>Click me</button> } ReactDOM.render(<App/>, document.getElementById('root')) <!-- language: lang-html --> <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script> <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script> <div id="root"></div> <!-- end snippet --> Espero que esta respuesta sea de ayuda.