Evaluación: React Frontend con TypeScript

1

¿Cuál de las siguientes afirmaciones describe mejor a React?

Es una biblioteca de JavaScript enfocada en la capa de vista (UI), no un framework completo Es un framework MVC completo que incluye routing, estado global y HTTP client Es un lenguaje de programación diseñado para crear interfaces web Es una herramienta de build como Webpack o Vite

2

¿Qué sucede cuando se usa un índice de array como key en una lista que puede reordenarse?

React reutiliza incorrectamente el estado de componentes anteriores al reordenar, causando bugs visuales No hay ningún problema; el índice es la key recomendada por React React lanza un error en consola y no renderiza la lista La lista se renderiza dos veces, una por cada key duplicada

3

¿Por qué las props en React son de solo lectura (inmutables)?

Para garantizar el flujo unidireccional de datos y que el padre mantenga el control sobre sus datos Porque JavaScript no permite mutar objetos pasados como parámetros Para reducir el uso de memoria al compartir la misma referencia Es una limitación de TypeScript, no de React

4

¿Qué problema causa mutar el estado directamente con `state.push(item)` en vez de usar `setState([...state, item])`?

La referencia del array no cambia, React no detecta el cambio y no re-renderiza el componente JavaScript lanza un TypeError porque los arrays de state son frozen El componente se re-renderiza pero con un delay de 1 segundo React actualiza el DOM pero los tests fallan porque Jest detecta la mutación

5

¿Qué sucede si omites una dependencia en el array de useEffect?

El efecto usa un valor obsoleto de la variable omitida (stale closure) porque no se re-ejecuta cuando esa dependencia cambia React lanza un error en runtime y el efecto no se ejecuta El efecto se ejecuta en cada render porque React ignora el array de deps incompleto No pasa nada; React detecta automáticamente las dependencias que faltan

6

¿Cuándo es preferible usar useReducer en lugar de useState?

Cuando el estado tiene múltiples transiciones complejas que se benefician de estar centralizadas en un reducer puro y testeable Siempre que el estado sea un objeto, independientemente de su complejidad Solo cuando se usa Context API, porque useReducer es un requisito de los providers useReducer es siempre mejor que useState; useState existe solo por compatibilidad

7

¿Cuál es la diferencia principal entre un componente controlado y uno no controlado en formularios?

En un controlado, React gestiona el valor vía state + onChange; en un no controlado, el DOM lo gestiona y se accede con useRef Un componente controlado valida automáticamente; uno no controlado permite cualquier valor Los controlados son solo para TypeScript; los no controlados son para JavaScript No hay diferencia funcional; es solo una convención de nomenclatura

8

¿Qué componente de React Router se usa para renderizar rutas hijas dentro de un layout padre?

<Outlet /> — renderiza la ruta hija dentro del layout padre, similar a un slot <Route /> — las rutas hijas se renderizan automáticamente sin componente especial <Children /> — componente de React Router para inyectar rutas anidadas <RouterView /> — componente heredado de la versión anterior de React Router

9

¿Qué problema resuelve TanStack Query que un useEffect con fetch no resuelve de forma nativa?

Caché automática, deduplicación de requests, invalidación, refetch en background y retry con backoff TanStack Query usa WebSockets en vez de HTTP, lo que es más rápido que fetch useEffect no puede hacer peticiones HTTP; siempre se necesita una librería externa TanStack Query convierte las respuestas a TypeScript automáticamente sin necesidad de tipar

10

¿Cuál es el principal problema de rendimiento de Context API y cómo se mitiga?

Todos los consumidores se re-renderizan cuando cualquier parte del valor cambia; se mitiga dividiendo en múltiples Contexts y memoizando valores Context no funciona con componentes funcionales; solo con componentes de clase Context API bloquea el hilo principal durante las actualizaciones de estado El Provider recrea el DOM completo de sus hijos en cada actualización

11

¿Por qué Redux Toolkit permite "mutar" el estado dentro de los reducers de createSlice?

Usa Immer internamente: las mutaciones se interceptan con un proxy y se convierten en actualizaciones inmutables Redux Toolkit abandonó la inmutabilidad porque causaba problemas de rendimiento Solo funciona en modo desarrollo; en producción las mutaciones se bloquean Usa Object.freeze() recursivo para prevenir mutaciones accidentales del estado

12

¿Cuál es la filosofía principal de React Testing Library y cómo difiere de Enzyme?

RTL testea el comportamiento visible al usuario (queries por role, texto) en vez de la implementación interna (estado, métodos) RTL renderiza componentes en un browser real; Enzyme usa un DOM simulado RTL solo testea componentes funcionales; Enzyme soportaba componentes de clase No hay diferencia funcional; RTL es simplemente la versión más reciente de Enzyme

13

¿Cuándo React.memo puede EMPEORAR el rendimiento en vez de mejorarlo?

Cuando las props siempre son diferentes (nuevos objetos/funciones), la comparación shallow es overhead sin beneficio React.memo nunca empeora el rendimiento; siempre es una optimización segura Cuando el componente tiene children, porque React.memo no puede comparar ReactNode En modo producción, porque React.memo solo se aplica en desarrollo

14

¿Cuál es la convención obligatoria para que React reconozca una función como un hook personalizado?

El nombre debe empezar con "use" (ej: useAuth), lo que permite al linter aplicar las reglas de hooks automáticamente Debe usar la directiva "use hook" al inicio del archivo, similar a "use client" Debe registrarse con React.registerHook() antes de usarse en un componente Debe exportarse desde un archivo .hook.ts para que React lo reconozca

15

¿Cuál es la diferencia entre usar `interface` y `type` para las props de un componente React?

Son casi equivalentes; interface soporta declaration merging y type soporta unions. La convención común es interface para props Solo interface funciona con React; type causa errores de tipado en JSX type es más rápido que interface porque TypeScript lo resuelve en una sola pasada interface genera código JavaScript; type es solo para compilación

16

¿Por qué Tailwind CSS tiene mejor rendimiento que Styled Components en producción?

Tailwind genera CSS estático en build time sin runtime JS; Styled Components parsea y genera estilos dinámicamente en cada render Tailwind usa CSS nativo que el navegador optimiza; Styled Components usa JavaScript para estilar No hay diferencia de rendimiento; Tailwind simplemente genera menos líneas de CSS Styled Components carga toda la librería (50KB) aunque solo uses un componente

17

¿Cuál es la diferencia fundamental entre un Server Component y un Client Component en Next.js?

El Server Component se ejecuta solo en el servidor y su JS no se envía al cliente; el Client Component ("use client") se hidrata en el navegador con interactividad El Server Component usa Node.js y el Client Component usa Deno como runtime No hay diferencia funcional; "use client" solo indica que el componente necesita TypeScript Los Server Components son más lentos porque esperan al servidor; los Client Components renderizan instantáneamente

18

¿Qué problema resuelve el patrón Compound Components que la composición simple con props no resuelve?

Permite que componentes hermanos compartan estado implícito vía Context, dando al consumidor control total sobre la estructura sin props explícitas Es más rápido que las props normales porque usa refs internamente para evitar re-renders Permite que los componentes se comuniquen sin un padre común, como un event bus Solo sirve para componentes de formulario; no funciona con otros tipos de UI

19

¿Qué es la reconciliación (reconciliation) en React y cuál es su complejidad algorítmica?

Compara Virtual DOM anterior con el nuevo mediante diffing O(n), usando heurísticas de tipo de elemento y keys para eficiencia Reemplaza todo el DOM real en cada render con O(1) gracias al batching automático Usa un algoritmo O(n log n) similar a merge sort para ordenar los cambios por prioridad Compara cada nodo del DOM real con el Virtual DOM usando O(n²) con optimizaciones de caché

20

¿Qué mejora introduce useTransition en React 18 para la experiencia de usuario?

Marca actualizaciones como no urgentes, permitiendo que React las interrumpa para priorizar interacciones del usuario y mantener la UI responsive Permite animar transiciones CSS entre renders de React, reemplazando librerías como Framer Motion Mueve las actualizaciones a un Web Worker para no bloquear el hilo principal Agrupa múltiples setState en una sola actualización para reducir renders, algo que no existía antes de React 18

Evaluación: React Frontend con TypeScript

0 / 20 correctas