¿Por qué elegirías React frente a Vue o Angular para un proyecto frontend?

React es preferible cuando se prioriza flexibilidad para elegir las herramientas del stack, el equipo ya tiene experiencia con JavaScript moderno, o el proyecto necesita integrarse con un ecosistema amplio de librerías. También cuando existe la posibilidad de escalar hacia Next.js para SSR.

¿Qué ventaja ofrece el modelo de componentes de React para aplicaciones grandes?

Permite descomponer la UI en piezas pequeñas, independientes y reutilizables. Cada componente gestiona su propio estado y lógica, facilitando el desarrollo en paralelo por equipos distintos y el testing aislado de cada pieza.

¿Cuándo usarías React con Next.js en lugar de React puro como SPA?

Cuando el proyecto requiere SEO, buen rendimiento en la carga inicial, generación de páginas estáticas o renderizado en servidor. React puro como SPA es adecuado para aplicaciones internas o dashboards donde el SEO no es prioritario.

¿Qué problema resuelve el Virtual DOM de React?

Minimiza las operaciones directas sobre el DOM real, que son costosas en rendimiento. React calcula en memoria el mínimo conjunto de cambios necesarios y los aplica al DOM real de forma eficiente, mejorando el rendimiento en interfaces con actualizaciones frecuentes.

¿Cuándo extraerías lógica de un componente a un custom hook?

Cuando la lógica con estado necesita reutilizarse en múltiples componentes, cuando un componente se vuelve demasiado complejo mezclando lógica y presentación, o cuando se quiere testear la lógica de forma independiente de la UI.

¿Qué diferencia hay entre estado local de un componente y estado global en React?

El estado local con useState vive dentro del componente y solo es accesible por él y sus hijos mediante props. El estado global es compartido entre múltiples componentes no relacionados jerárquicamente y se gestiona con Context API, Redux, Zustand u otras soluciones.

¿Cómo decides qué datos guardar en el estado de React y cuáles derivar?

Solo se guarda en estado lo que no puede calcularse a partir de otros datos. Los valores derivados se calculan directamente en el render o con useMemo si el cálculo es costoso. Minimizar el estado reduce la complejidad y los bugs de sincronización.

¿Para qué tipo de proyectos tiene React ventaja clara frente a usar HTML y JavaScript vanilla?

En aplicaciones con interfaces complejas que cambian frecuentemente, múltiples vistas con navegación, estado compartido entre componentes o lógica de UI que se reutiliza en distintas partes. Para páginas estáticas o con poca interactividad, React puede ser excesivo.

¿Cuál es la diferencia entre useEffect con distintas configuraciones del array de dependencias?

Sin array de dependencias el efecto se ejecuta después de cada render. Con array vacío solo se ejecuta al montar el componente. Con dependencias se ejecuta cuando alguna de ellas cambia. La función de limpieza retornada se ejecuta antes del siguiente efecto o al desmontar.

¿Cuándo usarías useCallback y useMemo y cuándo evitarías usarlos?

useCallback memoiza funciones para evitar que los componentes hijos con React.memo se rerenderizen innecesariamente. useMemo memoiza cálculos costosos. Ambos añaden complejidad y tienen coste propio, por lo que solo se justifican cuando hay un problema de rendimiento medible, no de forma preventiva.

¿Cómo evitarías rerenders innecesarios en un árbol de componentes React?

Usando React.memo para componentes que reciben las mismas props, useCallback para funciones pasadas como props, useMemo para valores calculados costosos, y dividiendo el estado para que los cambios solo afecten a los componentes que realmente lo necesitan.

¿Cuándo usarías Context API y cuándo optarías por una librería de estado global como Zustand o Redux?

Context API es adecuada para estado que cambia poco frecuentemente como tema, idioma o usuario autenticado. Para estado que cambia con frecuencia o lógica compleja de actualización, Redux Toolkit o Zustand son más eficientes al evitar rerenders masivos por cambios en el contexto.

¿Cómo gestionarías el fetching de datos en una aplicación React moderna?

Con librerías como React Query o SWR que gestionan automáticamente caché, estados de carga y error, revalidación y sincronización. Evitan reinventar esta lógica con useEffect y useState, que genera código propenso a bugs como race conditions y actualizaciones en componentes desmontados.

¿Qué diferencia hay entre componentes controlados y no controlados en React?

En componentes controlados el estado del input vive en React y se sincroniza con value y onChange. En no controlados el DOM gestiona el valor y se accede con refs. Los controlados son más predecibles y testeables, los no controlados son útiles para integraciones con librerías externas o formularios simples.

¿Cómo implementarías code splitting en una aplicación React de gran tamaño?

Usando React.lazy con Suspense para cargar componentes de forma diferida al navegar a una ruta. En combinación con React Router se divide el bundle por ruta, reduciendo el tiempo de carga inicial cargando solo el código necesario para la vista actual.

¿Cómo gestionarías efectos secundarios complejos con múltiples dependencias en React?

Extrayendo la lógica a custom hooks para mantener el componente limpio, usando useReducer cuando el estado tiene múltiples sub-valores relacionados, y evaluando si librerías como XState son necesarias para máquinas de estado complejas con transiciones explícitas.

¿Cómo estructurarías una aplicación React grande para mantener la escalabilidad del código?

Organizando el código por dominio o feature en lugar de por tipo de archivo, con cada feature conteniendo sus propios componentes, hooks, servicios y tests. Usando una capa de servicios para la comunicación con APIs, barrel exports para imports limpios y una arquitectura de estado clara desde el inicio.

¿Cómo diseñarías un sistema de componentes reutilizables para una librería de UI interna?

Definiendo componentes primitivos altamente configurables con props bien tipadas en TypeScript, usando composición en lugar de herencia, documentando con Storybook, versionando con semver y garantizando accesibilidad desde el diseño del componente.

¿Cómo optimizarías el rendimiento de una aplicación React con listas de miles de elementos?

Usando virtualización con librerías como react-window o react-virtual para renderizar solo los elementos visibles en pantalla, paginación o scroll infinito para limitar los datos cargados, y memoización de items individuales con React.memo para evitar rerenders al actualizar otros elementos.

¿Cómo abordarías el testing de componentes React con lógica compleja?

Con React Testing Library para tests centrados en el comportamiento del usuario en lugar de detalles de implementación, Jest para lógica de custom hooks con renderHook, y mocks de servicios externos con MSW para simular respuestas de API en tests de integración.

¿Cuándo considerarías migrar de React puro a Next.js en un proyecto existente?

Cuando el SEO se vuelve prioritario, cuando los tiempos de carga inicial impactan la retención de usuarios, cuando se necesita generación estática de páginas de contenido o cuando el equipo quiere una estructura de proyecto más opinionada con routing y API routes integrados.

¿Cómo gestionarías el estado de formularios complejos con validaciones dinámicas en React?

Con React Hook Form por su rendimiento al evitar rerenders en cada keystroke, integrado con Zod o Yup para validaciones tipadas y reutilizables. Para formularios con lógica muy dinámica como campos que dependen de otros, el watch de React Hook Form permite reaccionar a cambios específicos.

No entender cuándo y por qué se rerenderiza un componente

No saber que un componente se rerenderiza cuando cambia su estado, sus props o el contexto del que depende, lleva a bugs de rendimiento y comportamientos inesperados. Es una pregunta frecuente en entrevistas mid-level de React.

Usar useEffect para lógica que no requiere sincronización con el exterior

Calcular valores derivados o transformar datos dentro de useEffect cuando podrían calcularse directamente en el render o con useMemo refleja no entender el propósito de este hook y genera código más complejo y propenso a bugs.

No conocer alternativas modernas para el fetching de datos

Implementar fetching con useEffect y useState manualmente sin conocer React Query o SWR genera código repetitivo con race conditions y manejo de caché incorrecto. No conocer estas herramientas refleja desactualización en el ecosistema React.

Abusar de Context API para estado que cambia frecuentemente

Usar Context para estado global que se actualiza con frecuencia genera rerenders masivos en todos los componentes suscritos. No conocer cuándo Context es insuficiente y cuándo usar Zustand o Redux refleja falta de experiencia con aplicaciones React grandes.

No justificar la elección entre React puro y Next.js

Elegir React puro sin evaluar si el proyecto necesita SSR o SSG, o usar Next.js para una app interna sin requisitos de SEO, refleja falta de criterio sobre las herramientas del ecosistema React.

Aplicar memoización de forma preventiva sin medir el problema

Añadir React.memo, useCallback y useMemo en todos los componentes sin un problema de rendimiento medible añade complejidad innecesaria. En entrevistas se espera saber cuándo aplicar optimizaciones, no aplicarlas siempre por defecto.

React

La librería JavaScript para interfaces de usuario modernas

React es una librería JavaScript desarrollada por Meta para construir interfaces de usuario basadas en componentes reutilizables. Su modelo de programación declarativo, el Virtual DOM y su ecosistema flexible la convierten en la opción más adoptada para construir aplicaciones web modernas, desde SPAs hasta aplicaciones de alto rendimiento con renderizado en servidor.

JavaScriptTypeScriptJSXComponents

Demanda del mercado

React es la librería frontend más demandada del mercado a nivel mundial. Tiene presencia dominante en startups, empresas de producto y grandes corporaciones. Es el requisito frontend más frecuente en ofertas de trabajo para perfiles frontend y full-stack.

Librería frontend más demandadaPresente en startups y grandes empresasEcosistema más grande del frontend

Requisitos técnicos

Intermediate

Requiere dominio sólido de JavaScript moderno con ES6+, comprensión del modelo de componentes y ciclo de vida, y familiaridad con hooks, gestión de estado y comunicación con APIs. TypeScript es cada vez más esperado en posiciones mid y senior.

Casos de uso

Proyectos Reales

React se utiliza para desarrollar:

Single Page Applications con navegación compleja
Dashboards y paneles de administración
Plataformas SaaS con interfaces ricas
Aplicaciones con renderizado en servidor usando Next.js

Tipos de Empresa

React es adoptado por:

Startups tecnológicas con productos digitales
Empresas de producto con frontends complejos
Agencias digitales con proyectos web modernos
Grandes corporaciones con plataformas internas

Escenarios de Producción

React es ampliamente utilizado en entornos productivos como:

SPAs con routing del lado del cliente
Aplicaciones con estado global complejo
Interfaces con actualizaciones frecuentes en tiempo real
Frontends consumiendo APIs REST o GraphQL

Escalabilidad

React ofrece múltiples mecanismos para escalar aplicaciones:

Code splitting y lazy loading para optimizar el bundle
Memoización con useMemo y useCallback para evitar renders innecesarios
Gestión de estado escalable con Redux Toolkit o Zustand
Renderizado en servidor con Next.js para performance y SEO

Ventajas y Desventajas

Ventajas

Modelo de componentes reutilizables que escala bien en aplicaciones grandes.

Ecosistema enorme con soluciones para routing, estado, testing y más.

Virtual DOM que optimiza actualizaciones del DOM real de forma eficiente.

Desventajas

Es solo una librería de UI, requiere decisiones sobre el resto del stack.

La proliferación de patrones y librerías puede generar fatiga de decisiones.

Sin disciplina arquitectónica, las aplicaciones grandes pueden volverse difíciles de mantener.

Comparación

Ventajas de Vue.js

Curva de aprendizaje más suave
Menor fatiga de decisiones con soluciones oficiales integradas
Sintaxis de templates más cercana a HTML tradicional

Consideraciones

Vue ofrece más opiniones por defecto y es más accesible para developers sin experiencia en frameworks modernos. React tiene mayor adopción en el mercado y ecosistema más grande.