Sync - Async en JS

1. By: Martin Suarez (suarezcm)
Arturo Guillen (guillenba)

2. Agenda
• Sincrono
• Asincrono
• Promesas
• Async – await
• Async / await vs Promesas
• React setState()
• Ejemplos del setState
• Consultas, comentarios o sugerencias

3. Sincrono (Sync)
En un proceso SINCRONO podríamos imaginar tener un proceso "A" y
un proceso "B" estos no se ejecutan al mismo tiempo en paralelo, es
decir si por ejemplo envió ambos a ejecutarse A dura 5 segundos y B 10
segundos, B tendría que esperar que A termine de ejecutarse para el
poder entonces ejecutarse en total estas operaciones consumirían 15
segundos.

4. Asincrono (Async)
En un proceso ASINCRONO podríamos imagine tener un proceso "A" y
un proceso "B" estos se ejecutan al mismo tiempo en paralelo, es decir
si por ejemplo envió ambos a ejecutarse A dura 5 segundos y B 10
segundos, en total estas operaciones consumirían 10 segundos.

5. Promesas (Promises)
Una promesa representa un valor que puede estar disponible ahora, en el futuro, o
nunca.

6. Promesas (Promises) 1
Una Promesa es un proxy para un valor no necesariamente conocido
en el momento que es creada la promesa. Permite asociar
manejadores que actuarán asincrónicamente sobre un eventual valor
en caso de éxito, o la razón de falla en caso de una falla.

8. async / await
Las funciones Async/await, nos ayudan a escribir código completamente
síncrono mientras realizamos tareas asíncronas en segundo plano.

9. async / await
Una nueva forma de escribir código asíncrono es Async/Await está
basado en promises, así que no está bloqueando el flujo.
La gran diferencia es que el código asíncrono se parece y se
comporta un poco más al código síncrono. Aquí es donde reside todo
su poder.
Las opciones anteriores para el código asíncrono eran callbacks
(llamadas de retorno) y promises.

12. Async / await
vs Promesas

13. Async / await vs
Promesas (Scope)

14. Async / await vs
Promesas (Logic)

15. Async / await vs
Promesas (Error)

16. Problemas con el setState

17. ¿Qué hace setState?
setState() programa una
actualización al objeto estado de un
componente. Cuando el estado cambia,
el componente responde volviendo a
renderizar.

18. ¿Por qué setState me está dando el valor incorrecto?
En React,
tanto this.props como this.state representan los
valores renderizados, es decir, lo que hay
actualmente en la pantalla.
Las llamadas a setState son asíncronas; no
te fíes de que this.state refleje el nuevo
valor inmediatamente después de llamar
a setState

19. incrementCount() {
// Nota: esto *no* funcionará como se espera.
this.setState({count: this.state.count + 1});
}
handleSomething() {
// Digamos que `this.state.count` se inicia en 0.
this.incrementCount();
this.incrementCount();
this.incrementCount();
// Cuando React rerenderiza el componente, `this.state.count` será 1, pero tu esperabas 3.
// Esto es porque la función anterior `incrementCount()` lee de `this.state.count`,
// pero React no actualiza `this.state.count` hasta que el componente se vuelve a renderizar.
// Entonces `incrementCount()` termina leyendo `this.state.count` como 0 cada vez, y lo establece
a 1.
}
Ejemplo de código que no se comportará como se espera

20. ¿Cómo actualizo el estado con valores que
dependen del estado actual?
Pasa una función en lugar de un objeto a setState para asegurarte de
que la llamada siempre use la versión más actualizada del estado

21. incrementCount() {
this.setState((state) => {
// Importante: lee `state` en vez de `this.state` al actualizar.
return {count: state.count + 1}
});
}
handleSomething() {
// Digamos que `this.state.count` inicia en 0.
this.incrementCount();
this.incrementCount();
this.incrementCount();
// Si lees `this.state.count` ahora, aún sería 0.
// Pero cuando React vuelva a renderizar el componente, será 3.
}
Ejemplo de un comportamiento esperado, utilizando una función

22. ¿Cuándo setState es asíncrono?
Esto se traduce en mejoras
significativas de rendimiento.
DIV Padre
DIV hijo
Evento onClick actualiza
propiedad A del estado
Evento onClick actualiza
propiedad B del estado
React intencionalmente
esperara todas las
actualizaciones para
realizar un solo render.
setState es asíncrono dentro de
los controladores de eventos.
Esto garantiza, por
ejemplo, que si Parent y Child llaman a set
State durante un evento de click, Child no
se renderiza dos veces.

23. ¿Se puede ejecutar una función cuando el setState
haya actualizado el estado correctamente ?
setNumeroElevado_EjemploBuenaPractica(estado,funcionExitosa){
this.setState({...estado}, funcionExitosa);
}

24. Ejemplos del setState

26. Bibliografía
• Kent, J (2019). Async/await Como Funcionan Realmente. Javascript, 1(1), 1. Recuperado de:
https://www.ma-no.org/es/programacion/javascript/async-await-como-funcionan-realmente-un-ejemplo
• Firefox, M (2020). Función async. Javascript, 1(1), 1. Recuperado de:
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Sentencias/funcion_asincrona
• Firefox, M (2020). Promise. Javascript, 1(1), 1. Recuperado de:
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Promise
• React, R (2020). Estado del componente. Javascript, 1(1), 1. Recuperado de: https://es.reactjs.org/docs/faq-
state.html#:~:text=Actualmente%2C%20setState%20es%20as%C3%ADncrono%20dentro,final%20del%20eve
nto%20del%20navegador.
• Nolan, T (2020). Cómo escribir código asíncrono en Node.js. Javascript, 1(1), 1. Recuperado de:
https://www.digitalocean.com/community/tutorials/how-to-write-asynchronous-code-in-node-js-es
• Hoehne, K (2018). Async/Await vs Promises — A Guide and Cheat Sheet. Javascript, 1(1), 1. Recuperado de:
https://levelup.gitconnected.com/async-await-vs-promises-4fe98d11038f
• Mogollón, P (2018). Callbacks vs Promise vs Async/Await en JavaScript. Javascript, 1(1), 1. Recuperado de:
http://www.paulomogollon.com/promises-vs-async-await-vs-callbacks-en-javascript-espanol/