Actualizaciones automáticas

Clase 30 de 37 • Curso de React.js 2019

Resumen

Polling consiste en que cada cierto tiempo que es definido por nosotros se buscan los datos y se actualizan automáticamente. Esto se hará constantemente hasta que el usuario se vaya de la página.

David De Freitas

student•

Gente quejándose porque no le gustó el polling y no entendió que es un simple ejemplo y no lo deben usar en un proyecto real colocando mensajes en 3, 2, 1...

Marcos Salazar

student•

Quejarse es gratis...

Erick Reyes

student•

Tampoco hay que defender todo lo que hagan los profesores en los cursos, yo no conocía que era el polling y gracias a los comentarios supe que era una mala practica, y como tu mismo mencionaste es algo que no debemos usar en un proyecto real, es un detalle muy importante que se debió explicar.

Walter Ugalde A

student•

Con esa solución de resfrescar los datos cada tantos segundos, no me funciona, ya que si tengo muchos usuarios las peticiones a mi backend van a ser muchas y en la mayoria sin ninguna necesidad ya que los datos no cambian.

Paulina Zoffoli

company_admin•

apoyo la noción, quisiera una mejor solución.

Alejandro Alfonzo

student•

El polling es un anti patrón a la hora de desarrollar, enseñarlo para fines prácticos no está mal, se ahorra explicar el cómo montar un socket, aunque podría haber usado la capa gratuita de firebase y hubiera sido mucho mejor, le hubiera tomado el mismo tiempo que le tomó parchear todas las cosas que produce el polling. El problema que veo principalmente es que no explica claramente las consecuencias y afecta bastante el aprendizaje de los que recíen empiezan al mostrar el polling como una "solución viable para sistemas simples". Aunque por otra parte, si hubiera polling en platzi al menos no se romperían los cursos cuando te meten en medio un video de youtube(? jaja

Alexander Henry Obispo Buendia

student•

Peligrosa pero interesante técnica

Willy David Da Conceicao Lozada

student•

jeje si xD

Isaias Chávez

student•

Tan buena racha de comentarios positivos que tenia :'(

JUNIOR JAVIER SANCHEZ CUSTODIO

student•

no pasa nada, este curso vale más que todos los 5 años de mi uni jajaja

Iván Darío Sánchez Jiménez

student•

Aunque tengo funcionando todo al aplicar el setInterval me tiraba un error al cumplirse el primer intervalo, al estudiar mi código noté que mi única diferencia con el del profesor es que mi declaración del fetchData no la hacía con arrow functions

  async fetchData() {
    this.setState({ loading: true, error: null});
    try {
      const data = await api.badges.list();
      this.setState({ loading: false, data: data });
    } catch (error) {
      this.setState({ loading: false, error: error });
    }
  }

Ahora al pasarla a arrow functions se corrigió y les explico porqué:

Al pasar la funcion al setInterval sin usar parentesis es como si pegaramos la declaración de la funcion asincrona lo que incluye la palabra reservada async cuando usamos arrow functions, mientras que la forma en que yo declaré la función se perdia la instruccion de que era una función asincrona.

Otra forma de solucionarlo sin convertir el método a arrow functions seria pasarle la funcion asincrona de la forma

setInterval(()=> this.fetchData(), 3000);

Dejo este post como caso de estudio para que lo tengan presente.

Abdiel Ortega

student•

Es por el contexto de this

Iván Darío Sánchez Jiménez

student•

Exacto @adiel7ortega investigando mas afondo existe diferencias entre el contexto de una función normal vs una arrow function.

Para mas detalles les recomiendo este post de stack overflow

Contexto de una función normal vs una arrow function

Willy David Da Conceicao Lozada

student•

![](

Wilson Delgado

student•

gracias

Willy David Da Conceicao Lozada

student•

de nada men, bien que te sirvió de algo :)

Alexis Antonio Moraga Gallardo

student•

Buena Clase, aunque la solución para las actualizaciones no me pareció del todo elegante xD

Les dejo mi repositorio en GitHub en donde voy siguiendo el progreso del curso y dejando notas separadas clase a clase

Jhon Carlos Colorado Angulo

student•

Nada mal 👍

Daniel González

student•

Pues no me parece nada práctico, así que no implementaré esto

Manuel Robles

student•

I am very thankful for this course and I hope Richard continues dictating courses like this one, I learned too many techniques however I know there are a lot of things to learn. I learned that React is only one more tool and is not the total solution but I think it must be. I want to express my gratitude to all in this community especially to than ones that contribute with solutions to problems during the development of code.

Kind Regards.

Carlos Ferrer

student•

Agradezco que lxs compañerxs muestren sus opiniones con respecto a lo útil o no útil de esta técnica porque me ayuda a aprender más.

David Antonio Garcia Saaib

student•

Estuvo buena esta clase, el setInterval se puede usar en cualquier servicio en el que se muestren datos en tiempo real:

Mensajería
Gráficos
Datos No sé si se use esta misma herramienta en facebook para actualizar la pagina cuando ya paso un tiempo, pero podría ser un buen introductorio al tema.

David Antonio Garcia Saaib

student•

Creo que es momento de regresar a la clase 1 jaja xD a practicar lo aprendido

Andrés Valencia

student•

...y examinando el Mini loader me di cuenta de la sintaxis abreviada para exportar el componente:

export default class MiniLoader extends Component { }

Daniel Saldarriaga

student•

El Polling se puede lograr con un React Hooks de la siguiente manera:

const [intervalId,setIntervalID]=useState()
useEffect(()=>{
    fetchData()
    const interv=setInterval(fetchData,5000)
    setIntervalID(interv)
    return function cleanup(){
        clearInterval(intervalId)
    }
},[])

Julian Carelli

student•

Gracias:D

Jhonatan Ferney Ospina

student•

Genial está clase

Janice Prendas

student•

Muy buena esta técnica de Polling

Maximo Martinez Soria

student•

Esto no puede traer muchos problemas de performance?

Gabriel De Andrade

student•

Si, no lo uses en proyectos muy grandes que manejen demasiados datos, para eso están muchas otras técnicas como WebSockets que son bastante más avanzadas. Lo hacemos de esta manera por que es un proyecto pequeño y usar técnicas avanzadas sería demasiado problema. Es importante saber medir el nivel de complejidad que requieres y no hacer Overengineering :D

Isaías Fernández

student•

A que se refieren con problemas de performance?

Can Chen

student•

Alguien me puede confirmar si en el inspector de elementos os aparece COMPONENTS Y PROFILES en vez de REACT, es por alguna actualizacion?

Guillermo García López

student•

Para poder usar las herramientas de desarrollo de React necesitas instalar la extensión en el navegador que te encuentres usando.

Este es el link para Google Chrome: https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

O el caso para Firefox este es el link: https://addons.mozilla.org/en-US/firefox/addon/react-devtools/

Una vez instalada la extensión, te va a aparecer la sección de react. Lo puedes ver en la siguiente imagen:

Espero te sirva

Ulises Corral

student•

Es por una actualización, no hay problema. Es normal que te aparezca así.

julian roland

student•

no entiendo la forma en que usas el operador && , vos decis que quiere decir "entonces", pero en realidad el && es un operador logico

Facundo Nicolás García Martoni

teacher•

Bueno, yo lo interpreté así: && significa AND, lo que quiere decir que para que sea true p ^ q ambas premisas deben ser verdaderas. En programación se evalúan las condiciones de izquierda a derecha, quiere decir que si para la condición AND la primera premisa es falsa la que está despues no se evalúa. En cambio, si es verdadera se evalua la siguiente. Es por eso que el && funciona como un "entonces", ya que si se cumple la primera condición se ejecutará el código que se encuentra después del operador. Espero que mi explicación te sirva :)

Can Chen

student•

En este caso && hace referencia a AND, por lo tanto, SOLO cuando las dos condiciones propuestas se cumplan se ejecutará el código que hay escrito.

Isaias Chávez

student•

¿Alguien sabe donde puedo aprender sobre websockets dentro de platzi?

Juan Luis Rojas León

student•

Claro. Puedes aprender Websockets en el Curso Básico de NodeJs.

Daniel Páez

student•

¿En si que son las web sockets ?

Jair Neri

student•

Algun otro curso donde se aborde un poco más de peticiones ?

Gabriel De Andrade

student•

Claro! Puedes checar el Curso de Asincronismo con JavaScript :D

Mati Juguera

student•

El de https://platzi.com/cursos/api-rest/

Actualizaciones automáticas

Introducción a React.js

¿Qué es React.js?

Pre-requisitos

Herramientas que usaremos

Create-react-app

Fundamentos

Clonar el código de GitHub

ReactDOM.render

JSX

Creación y diseño de componentes

¿Qué es un componente?

Qué es y cómo funciona un componente en React.js

Nuestro primer componente

Cómo aplicar estilos

Props

Nuestra primera página

Enlazando eventos

Manejo de estado

Levantamiento del estado

Listas de componentes

React Router

Introducción a React Router

División de la aplicación en rutas

Mejorando la User Interface con un Layout

Component Lifecycle

Introducción del ciclo de vida de un componente

Práctica del ciclo de vida

Llamadas a un API

Introducción llamadas a un API

React.js: Cómo traer datos de un API en React

Solicitando datos (GET)

Mejorando la Experiencia de Usuario durante una petición

Enviando datos (POST)

Manejando los estados de la petición durante el POST

Actualizando datos (PUT)

Actualizaciones automáticas

Mejorando la UI

Los detalles de un Badge

UI Components y Container Components

Portales

Modales

Hooks

Search filter

Conclusion

Conclusión