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}
}
Entonces, ReactJS
va a aplicar el cambio de estado para la última llamada de cambiaUser->setUser
, nóteseNó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
});
}