Skip to main content
se añadieron 919 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22
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);
    //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: tomo el prevState del callback setState
    //{nombre: "Luis", num_seguidores: 1, siguiendo: false}
    //newState
    //{nombre: "Luiss", num_seguidores: 1, siguiendo: false}
    //ReactJS: ejecuto cambiaUser para siguiendo:true
    //prevState: tomo el prevState del callback setState
    //{nombre: "Luiss", num_seguidores: 1, siguiendo: false}
    //newState
    //{nombre: "Luiss", num_seguidores: 1, siguiendo: true}
  }
  console.log("state is", state)
  return <button onClick={handler}>Click me</button>
}


ReactDOM.render(<App/>, document.getElementById('root'))
<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>
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'))
<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>
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);
    //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: tomo el prevState del callback setState
    //{nombre: "Luis", num_seguidores: 1, siguiendo: false}
    //newState
    //{nombre: "Luiss", num_seguidores: 1, siguiendo: false}
    //ReactJS: ejecuto cambiaUser para siguiendo:true
    //prevState: tomo el prevState del callback setState
    //{nombre: "Luiss", num_seguidores: 1, siguiendo: false}
    //newState
    //{nombre: "Luiss", num_seguidores: 1, siguiendo: true}
  }
  console.log("state is", state)
  return <button onClick={handler}>Click me</button>
}


ReactDOM.render(<App/>, document.getElementById('root'))
<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>
se añadieron 70 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

Por lo tanto, después de que ReactJS devuelve nuevamente el componente (re-render), como resultado se obtiene:

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, el cual nos permite obtener la captura del estado previo, modificar y regresar su nuevo estado para llamadas consecutivas al setter setState que esten en el mismo scope, en este caso todas las llamadas a cambiaUser dentro de la funcion handler.

Por lo tanto, como resultado se obtiene:

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, el cual nos permite obtener la captura del estado previo, modificar y regresar su nuevo estado para llamadas consecutivas al setter setState .

Por lo tanto, después de que ReactJS devuelve nuevamente el componente (re-render), como resultado se obtiene:

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, el cual nos permite obtener la captura del estado previo, modificar y regresar su nuevo estado para llamadas consecutivas al setter setState que esten en el mismo scope, en este caso todas las llamadas a cambiaUser dentro de la funcion handler.

se añadieron 1516 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22

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->setUsery 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
        });
    }

Pero, cuando se hace la llamada a setUser en multiples ocaciones dentro del mismo scope, 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->setUsery así sucesivamente... No, JS continua su ejecución:

    function handler(){
        cambiarUser("num_seguidores", user.num_seguidores + 1);
        //JS : aun no regreso, continuo
        cambiarUser("nombre", "Luiss");
        //JS: aun no regreso continuo
        cambiarUser("siguiendo", true);
       //JS: ya no hay nada, regresa funcion handler al call stack
    }

Entonces, ReactJS va a aplicar el cambio de estado para la última llamada de cambiaUser->setUser, nótese que hasta este punto el estado user no ha cambiado, la captura de user sigue siendo la misma que al inicio de la App, JS sigue en el mismo scope y ReactJS aún no devuelve aquí:

    cambiarUser("siguiendo", true);
    //JS: 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
        });
    }

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->setUsery 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
        });
    }
se añadieron 2136 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22
Loading
se añadieron 63 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22
Loading
se añadieron 1338 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22
Loading
se añadieron 27 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22
Loading
cuerpo editado
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22
Loading
se añadieron 70 caracteres en el cuerpo
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22
Loading
Origen Enlace
g.4
  • 3.5k
  • 2
  • 11
  • 22
Loading