Ir al contenido principal

Entradas

Mostrando las entradas etiquetadas como fetch

Renderizar en React a partir de un objeto que puede cambiar obtenido por fetch

  Tengo un componente React que renderiza los datos de un objeto. Este objeto se carga a partir de un fetch, pero también es actualizado mediante un manejador de eventos. ¿Cómo hago para que el componente React se re-renderice por completo cuando cambia este objeto? Además las modificaciones realizadas sobre el objeto pueden no existir en el objeto original, sino crearse un nuevo objeto a partir del original y aplicársele las modificaciones. En React, el re-renderizado depende de que el estado o las props cambien de referencia . Si tenés un objeto que se carga con fetch y luego se modifica con un manejador de eventos, lo importante es no mutar directamente el objeto , sino crear uno nuevo y actualizar el estado con esa nueva referencia. 📌 Estrategia correcta Guardá el objeto en un state con useState . Cada vez que lo modifiques, generá un nuevo objeto (spread, Object.assign , etc.) en lugar de mutar el existente. Llamá al setter ( setData ) con ese nuevo objeto. React detecta e...

Javascript fetch con timeout

 ¿Al fetch de Javascript se le puede establecer un timeout? ¡Absolutamente! El fetch de JavaScript, por sí solo, no tiene una opción de timeout directa en su objeto de configuración ( options ). Sin embargo, existe una herramienta moderna y diseñada exactamente para este propósito: el AbortController . El AbortController te permite controlar y cancelar solicitudes fetch externas, incluido el establecimiento de un límite de tiempo (timeout). Aquí te explico cómo implementarlo y te doy un ejemplo práctico en JavaScript. Implementación con AbortController y setTimeout La técnica consiste en lo siguiente: Crear una instancia de AbortController . Pasar la señal de ese controlador ( controller.signal ) a la solicitud fetch . Usar setTimeout para llamar a controller.abort() después del tiempo deseado. Si el fetch termina antes de que expire el setTimeout , limpiamos el timer . Si el setTimeout expira primero, el fetch se cancela y lanza un error. Código de Ejemplo function fet...