Efectos y AsincronÃa
Mecánica de useEffect, race conditions, limpieza, hidratación y data fetching.
- Media~20 min
Array de Dependencias Engañoso
El usuario obtiene los datos correctamente, pero el componente entra en un bucle infinito de solicitudes de…
- useEffect
Comenzar reto - Media~20 min
useLayoutEffect vs useEffect
Ves una interfaz con parpadeo donde un elemento aparece arriba e instantáneamente salta hacia abajo. ¿Qué…
- useLayoutEffect
- useEffect
Comenzar reto - DifÃcil~35 min
Condiciones de Carrera en useEffect
Un usuario hace clic en "Usuario 1" y luego rápidamente en "Usuario 2". La red para Usuario 1 es lenta y…
- Race conditions
- useEffect
Comenzar reto - Media~20 min
El Fetcher con Condición de Carrera
Tenemos una barra de búsqueda. Si escribes "React" rápidamente, las llamadas a la API para "R", "Re", "Rea"…
- Race conditions
- Data fetching
Comenzar reto - Media~20 min
El Bucle de la Muerte del Efecto
La aplicación se cuelga o congela inmediatamente al cargar debido a un bucle infinito de renders.
- useEffect
Comenzar reto - DifÃcil~35 min
Corrección de Desajuste de Hidratación
La aplicación muestra un error de desajuste de hidratación porque el HTML renderizado en el servidor no…
- SSR
Comenzar reto - Media~20 min
Prevención de Condiciones de Carrera con AbortController
Este componente tiene una condición de carrera: si el usuario escribe rápidamente, resultados de fetch más…
- AbortController
- Data fetching
Comenzar reto - DifÃcil~35 min
WebSocket Resiliente con Auto-Reconexión
La conexión del chat se cae en redes inestables y nunca se recupera. Construye un hook personalizado que abra…
- WebSocket
Comenzar reto - DifÃcil~35 min
Sincronización de Estado entre Pestañas con BroadcastChannel
Cuando el usuario actualiza una configuración en una pestaña, las demás pestañas abiertas de la app deben…
- BroadcastChannel
Comenzar reto - Media~20 min
Prefetch de Datos al Hover
Hacer clic en una tarjeta abre una página de detalle que hace fetch de sus datos, dejando al usuario mirando…
- Prefetch
- Data fetching
Comenzar reto - Media~20 min
useMediaQuery — Seguro en SSR
Construye un hook useMediaQuery(query) seguro en Next.js / cualquier setup SSR. window no existe en el…
- SSR
Comenzar reto - DifÃcil~35 min
Bloquear Navegación con Cambios sin Guardar
Cuando un formulario tiene cambios sin guardar, la app debe avisar antes de que el usuario cierre la pestaña…
- Navigation
Comenzar reto - DifÃcil~35 min
Typeahead con Debounce y Guardia de Race Conditions
Construye un dropdown de búsqueda sobre una base que funciona pero es ingenua: consulta searchApi (latencia…
- Race conditions
- Debounce
Comenzar reto - DifÃcil~35 min
Todos Optimistas con Rollback
La lista de todos base es pesimista: cada acción espera a un servidor mock (latencia de 400–1000ms, ~20% de…
- Optimistic UI
Comenzar reto