./live-coding

enunciados + leetcode

Enunciados como los de una entrevista real para resolver por tu cuenta, con el tiempo que te darían, y problemas de LeetCode recomendados para cada tecnología y seniority. Nada se corrige acá: resolvelo en tu editor, en voz alta, y marcá lo que ya practicaste.

# 1. tecnología

[x]Frontend · React.jsweb, hooks, Next.js [ ]Frontend · iOSSwift, SwiftUI, UIKit [ ]Frontend · AndroidKotlin, Jetpack Compose [ ]Frontend · React NativeExpo, iOS y Android [ ]Backend · Node.jsExpress, NestJS [ ]Backend · PythonDjango, FastAPI [ ]Backend · JavaSpring Boot [ ]Backend · .NETC#, ASP.NET Core [ ]AI engineeringconstruir agentes de IA [ ]Agentic engineeringdesarrollar con agentes [ ]Quality engineeringtesting manual y automatizado

# 2. seniority

[ ]Junior [ ]Semi-senior [x]Senior

# ejercicios (resolvelos por tu cuenta, con el tiempo que darían en la entrevista)

01Lista virtualizada desde ceroQue razones sobre performance de renderizado, el modelo de scroll del navegador y el costo real del DOM.60 min

Tenés que renderizar una lista de 100.000 ítems { id: number, label: string } en un contenedor de 600 px de alto sin que el navegador se trabe. No podés usar librerías de virtualización: implementá un componente VirtualList desde cero.

Asumí primero que todas las filas miden 40 px. La API del componente es <VirtualList items={items} itemHeight={40} height={600} renderItem={(item) => ...} />.

# requisitos

-Solo se montan en el DOM las filas visibles más un overscan configurable arriba y abajo.
-La scrollbar refleja el alto total de la lista (por ejemplo con un spacer o padding).
-El scroll es fluido; evitá recalcular de más en cada evento de scroll.
-Las filas usan keys estables para no remontar contenido al scrollear.
-Exponé un método o prop para hacer scroll hasta un índice dado.

# si te sobra tiempo, te van a preguntar

-¿Cómo lo adaptarías a filas de alto variable que no conocés de antemano?
-¿Qué problemas de accesibilidad trae la virtualización y cómo los mitigás?
-¿Cómo combinarías esto con carga infinita desde una API?
-¿Cuándo preferirías paginar en vez de virtualizar?

02Hook de datos con cache y reintentosQue sepas diseñar una abstracción de data fetching reutilizable, con concurrencia, cache e invalidación bien resueltos y una API pensada para otros devs.60 min

Diseñá e implementá un hook useQuery(key, fetcher, options) parecido a una versión mínima de React Query o SWR. Devuelve { data, error, status, refetch }, donde status es "idle" | "loading" | "success" | "error".

Si dos componentes montados al mismo tiempo usan la misma key, debe hacerse un solo request y ambos reciben el resultado. Si un componente se monta con una key ya cacheada, muestra el dato al instante y revalida en segundo plano si el dato tiene más de staleTime ms.

Para probarlo, mockeá fetchUser(id) que falla el 30% de las veces y tarda entre 200 y 600 ms.

# requisitos

-Cache compartido a nivel módulo o con un Provider, indexado por key.
-Deduplicación de requests en vuelo para la misma key.
-Reintentos con backoff exponencial (por ejemplo 3 intentos: 500 ms, 1 s, 2 s), configurables por opción.
-Si el componente se desmonta o cambia la key, no se actualiza el state con respuestas viejas.
-Tipado genérico en TypeScript: useQuery<User> devuelve data: User | undefined.

# si te sobra tiempo, te van a preguntar

-¿Cómo invalidarías el cache después de una mutación?
-¿Cómo evitarías que el cache crezca para siempre?
-¿Cómo lo integrarías con Suspense?
-¿Qué ventajas te daría useSyncExternalStore para suscribir componentes al cache?

03Deep clone con referencias circularesQue domines el modelo de objetos de JavaScript, recursión y estructuras de datos auxiliares, cuidando casos borde reales.45 min

Implementá deepClone(value) sin usar structuredClone ni JSON.parse(JSON.stringify()). Tiene que soportar objetos planos, arrays, Date, Map, Set, RegExp y primitivos, y devolver una copia donde ninguna referencia mutable se comparta con el original.

También tiene que soportar referencias circulares: si const a = { name: "a" }; a.self = a;, entonces const b = deepClone(a) cumple b.self === b y b !== a.

# requisitos

-Los primitivos y las funciones se devuelven tal cual.
-Las referencias circulares y compartidas se resuelven con un WeakMap de visitados.
-Se preserva el prototipo de los objetos.
-Los Map y Set clonan también sus claves y valores.
-Escribí casos de prueba que muestren cada tipo soportado.

# si te sobra tiempo, te van a preguntar

-¿Qué limitaciones tiene JSON.parse(JSON.stringify()) y cuáles tiene structuredClone?
-¿Cómo manejarías propiedades con Symbol como clave o no enumerables?
-¿Cómo lo harías iterativo para no reventar el stack con estructuras muy profundas?

# leetcode recomendado (Frontend · React.js · Senior)

MediumExecute Asynchronous Functions in ParallelDel plan 30 Days of JavaScript: implementar Promise.all a mano, la pregunta asíncrona más típica de frontend senior.

MediumCache With Time LimitDel plan 30 Days of JavaScript: un cache con TTL es exactamente lo que hay detrás de React Query o SWR.

HardMemoize IIMemoizar con argumentos que son referencias obliga a pensar en igualdad por identidad, igual que en useMemo y React.memo.

MediumFlatten Deeply Nested ArrayDel plan 30 Days of JavaScript: recursión controlada por profundidad, útil para árboles de menús, comentarios o rutas.

MediumLRU CacheDiseño de estructura de datos con Map en O(1); aparece seguido en entrevistas senior y en caches de cliente reales.

HardMinimum Window SubstringSliding window avanzado con conteo de frecuencias; mide si podés razonar invariantes bajo presión.

enunciados + leetcode

# 1. tecnología

# 2. seniority

[ ]Junior [ ]Semi-senior [x]Senior

# ejercicios (resolvelos por tu cuenta, con el tiempo que darían en la entrevista)

01Lista virtualizada desde ceroQue razones sobre performance de renderizado, el modelo de scroll del navegador y el costo real del DOM.60 min

Asumí primero que todas las filas miden 40 px. La API del componente es <VirtualList items={items} itemHeight={40} height={600} renderItem={(item) => ...} />.

# requisitos

-Solo se montan en el DOM las filas visibles más un overscan configurable arriba y abajo.
-La scrollbar refleja el alto total de la lista (por ejemplo con un spacer o padding).
-El scroll es fluido; evitá recalcular de más en cada evento de scroll.
-Las filas usan keys estables para no remontar contenido al scrollear.
-Exponé un método o prop para hacer scroll hasta un índice dado.

# si te sobra tiempo, te van a preguntar

-¿Cómo lo adaptarías a filas de alto variable que no conocés de antemano?
-¿Qué problemas de accesibilidad trae la virtualización y cómo los mitigás?
-¿Cómo combinarías esto con carga infinita desde una API?
-¿Cuándo preferirías paginar en vez de virtualizar?

Para probarlo, mockeá fetchUser(id) que falla el 30% de las veces y tarda entre 200 y 600 ms.

# requisitos

-Cache compartido a nivel módulo o con un Provider, indexado por key.
-Deduplicación de requests en vuelo para la misma key.
-Reintentos con backoff exponencial (por ejemplo 3 intentos: 500 ms, 1 s, 2 s), configurables por opción.
-Si el componente se desmonta o cambia la key, no se actualiza el state con respuestas viejas.
-Tipado genérico en TypeScript: useQuery<User> devuelve data: User | undefined.

# si te sobra tiempo, te van a preguntar

-¿Cómo invalidarías el cache después de una mutación?
-¿Cómo evitarías que el cache crezca para siempre?
-¿Cómo lo integrarías con Suspense?
-¿Qué ventajas te daría useSyncExternalStore para suscribir componentes al cache?

03Deep clone con referencias circularesQue domines el modelo de objetos de JavaScript, recursión y estructuras de datos auxiliares, cuidando casos borde reales.45 min

También tiene que soportar referencias circulares: si const a = { name: "a" }; a.self = a;, entonces const b = deepClone(a) cumple b.self === b y b !== a.

# requisitos

-Los primitivos y las funciones se devuelven tal cual.
-Las referencias circulares y compartidas se resuelven con un WeakMap de visitados.
-Se preserva el prototipo de los objetos.
-Los Map y Set clonan también sus claves y valores.
-Escribí casos de prueba que muestren cada tipo soportado.

# si te sobra tiempo, te van a preguntar

-¿Qué limitaciones tiene JSON.parse(JSON.stringify()) y cuáles tiene structuredClone?
-¿Cómo manejarías propiedades con Symbol como clave o no enumerables?
-¿Cómo lo harías iterativo para no reventar el stack con estructuras muy profundas?

# leetcode recomendado (Frontend · React.js · Senior)

MediumExecute Asynchronous Functions in ParallelDel plan 30 Days of JavaScript: implementar Promise.all a mano, la pregunta asíncrona más típica de frontend senior.

MediumCache With Time LimitDel plan 30 Days of JavaScript: un cache con TTL es exactamente lo que hay detrás de React Query o SWR.

HardMemoize IIMemoizar con argumentos que son referencias obliga a pensar en igualdad por identidad, igual que en useMemo y React.memo.

MediumFlatten Deeply Nested ArrayDel plan 30 Days of JavaScript: recursión controlada por profundidad, útil para árboles de menús, comentarios o rutas.

MediumLRU CacheDiseño de estructura de datos con Map en O(1); aparece seguido en entrevistas senior y en caches de cliente reales.

HardMinimum Window SubstringSliding window avanzado con conteo de frecuencias; mide si podés razonar invariantes bajo presión.