Las 40 preguntas y respuestas más frecuentes en entrevistas sobre React JS (2026)
james hartman
¿Te estás preparando para una entrevista de React JS? Es hora de descubrir lo que te espera. Comprender Preguntas de entrevista sobre React JS te ayuda a revelar tanto tu claridad conceptual como tus fortalezas en la implementación en el mundo real.
React JS ofrece grandes oportunidades profesionales para quienes cuentan con experiencia técnica y conocimientos especializados. Tanto si acabas de empezar como si tienes 5 o 10 años de experiencia, analizar tus habilidades y conocimientos técnicos es fundamental. Estas preguntas y respuestas ayudan a líderes de equipo, gerentes y desarrolladores a perfeccionar sus competencias y superar las mejores entrevistas.
Basada en las opiniones de más de 85 profesionales, entre los que se incluyen responsables de contratación y líderes técnicos, esta recopilación refleja las diversas expectativas del sector y los patrones reales de entrevistas recogidos de equipos de trabajo en diversos ámbitos.
Principales preguntas y respuestas de entrevista sobre React JS
1) Explique el DOM virtual y cómo funciona la reconciliación en React.
Respuesta
El DOM virtual es una representación en memoria de la interfaz de usuario que React mantiene para calcular eficientemente los cambios en la interfaz. Cuando el estado o las propiedades cambian, React renderiza un nuevo árbol del DOM virtual y luego ejecuta un diferenciando algoritmo contra el árbol anterior para descubrir el conjunto mínimo de operaciones DOM reales necesarias. Este proceso, llamado reconciliación, minimiza la inestabilidad del diseño y los costosos reajustes del navegador. React asigna claves Se utilizan elementos en listas para facilitar la correspondencia de nodos en diferentes renderizaciones, y se emplean heurísticas (como la comparación de tipos y claves) para decidir si actualizar, reordenar o eliminar nodos. Entre las ventajas se incluyen actualizaciones predecibles, menor margen de error y mejor rendimiento en interfaces de usuario complejas.
Ejemplo:
Representación de una lista dinámica de mensajes de chat: mediante el uso de una lista estable key En el caso de los valores (identificadores de mensajes), solo se agregan los mensajes nuevos al DOM, mientras que los nodos existentes permanecen intactos, evitando así renderizaciones innecesarias.
👉 Descarga gratuita del PDF: Preguntas y respuestas de entrevista sobre React JS
2) ¿Cuáles son los diferentes tipos de ciclos de vida de componentes en React y cómo se relacionan los Hooks con ellos?
Respuesta
Los componentes de React pasan por fases de montaje, actualización y desmontaje. En los componentes de clase, los métodos del ciclo de vida, como componentDidMount, shouldComponentUpdate, componentDidUpdate y componentWillUnmount gobernar los efectos secundarios, las decisiones de renderizado y la limpieza. En los componentes de función, Manos proporcionar capacidades equivalentes: useEffect Gestiona los efectos posteriores al renderizado; funciones de limpieza internas useEffect ejecutarse al desmontar o antes del siguiente efecto; useMemo y useCallback memoización de control; y useRef Los Hooks mantienen las referencias mutables entre renderizaciones. Entre sus ventajas se incluyen la composabilidad, la reducción de problemas con el enlace de `this` y una reutilización más sencilla de la lógica mediante Hooks personalizados. Su principal desventaja radica en la necesidad de aprender las reglas de los Hooks y la gestión de dependencias.
Responda con ejemplos:
- Efecto de montaje:
useEffect(() => fetchData(), []). - Limpieza al desmontar:
useEffect(() => { start(); return stop; }, []).
3) ¿Cómo se decide entre renderizado del lado del cliente (CSR), renderizado del lado del servidor (SSR), generación de sitios estáticos (SSG) y regeneración estática incremental (ISR) para una aplicación React?
Respuesta
La estrategia de renderizado debe estar guiada por los requisitos de experiencia del usuario, la actualidad de los datos, las necesidades de SEO, las limitaciones de la infraestructura y la velocidad de desarrollo. RSE Adecuado para aplicaciones altamente interactivas con autenticación previa donde el SEO es secundario. SSR Proporciona una primera impresión con datos reales para páginas públicas, mejorando el tiempo hasta el primer byte y el SEO, pero con mayores costos de servidor. SSG Precalcula las páginas en tiempo de compilación para lograr una excelente velocidad y almacenamiento en caché cuando los datos cambian con poca frecuencia. ISR Actualiza las páginas estáticas de forma incremental bajo demanda, ofreciendo un equilibrio entre actualidad y rendimiento. Entre los factores a considerar se incluyen la capacidad de almacenamiento en caché, la personalización, la latencia para audiencias globales y la complejidad operativa.
Tabla: Ventajas vs. Desventajas
| Nuevo enfoque | Ventajas | Desventajas |
|---|---|---|
| RSE | Alojamiento sencillo, gran interactividad | Primera pintura más lenta, SEO más débil |
| SSR | Excelente SEO, datos actualizados al cargar por primera vez | Mayor carga del servidor, mayor complejidad |
| SSG | Rápido, económico y compatible con CDN | Contenido obsoleto hasta la reconstrucción |
| ISR | Rápido con frescura controlada | Más elementos móviles que gestionar |
4) ¿Qué estrategia de gestión de estado se debe utilizar: estado local, Contexto, Redux o bibliotecas de consultas?
Respuesta
Elija el herramienta más sencilla que aborda las características del problema. Estado local del componente mediante useState or useReducer Es ideal para problemas aislados de interfaz de usuario. Contexto Funciona para valores de lectura frecuente y de toda la aplicación (tema, configuración regional, usuario actual), pero no está optimizado para actualizaciones de alta frecuencia en árboles grandes. Redux o similares almacenes basados en eventos destacan cuando se necesita predictibilidad, depuración con seguimiento del tiempo, middleware y flujos de datos unidireccionales estrictos. Bibliotecas de obtención de datos (Por ejemplo, los patrones de estilo React Query) gestionan los ciclos de vida del estado del servidor (almacenamiento en caché, deduplicación, estrategias de recuperación y sincronización), reduciendo el código repetitivo. Una arquitectura pragmática suele utilizar Estado local + Contexto para la configuración + una biblioteca de estado del servidor, reservando Redux para flujos de trabajo complejos.
Ejemplo:
Un panel de control utiliza React Query para el almacenamiento en caché de la API, Context para el tema y useReducer dentro de widgets complejos para el manejo de eventos locales.
5) ¿Cuál es la diferencia entre useEffect y useLayoutEffect, y cuándo se aplica cada uno?
Respuesta
useEffect Se ejecuta después de que el navegador haya terminado de pintar, lo que lo hace adecuado para tareas que no bloquean el sistema, como la obtención de datos, las suscripciones y el registro de eventos. useLayoutEffect ejecuta de forma síncrona después de las mutaciones del DOM pero antes de la pintura, lo que permite realizar ajustes de medición y diseño sin parpadeo (por ejemplo, leer el tamaño de los elementos y volver a aplicar los estilos de forma síncrona). La desventaja de useLayoutEffect es que puede bloquear la pintura y perjudicar la capacidad de respuesta si se usa en exceso. Una buena regla es empezar con useEffect para efectos secundarios y alcance para useLayoutEffect Solo cuando sea necesario medir o modificar el diseño de forma síncrona para garantizar la corrección visual.
Responda con ejemplos:
useEffect: Obtener el perfil del usuario después de la renderización.useLayoutEffect: medir el tamaño de una información sobre herramientas para posicionarla antes de pintar.
Comparación rápida
| Característica | efecto de uso | usarEfecto de diseño |
|---|---|---|
| Sincronización | Después de pintar | Antes de pintar |
| Caso de uso | Datos, suscripciones | Medidas, correcciones de diseño síncronas |
| Supervisión | Pequeños problemas si es pesado | Bloquea la pintura si es pesada |
6) Explique cómo funcionan las claves en las listas y los problemas que conlleva el uso de índices de matrices.
Respuesta
Las claves permiten que React realice una reconciliación precisa para identificar los elementos de la lista entre renderizaciones. Las claves estables y únicas permiten que React reordene, inserte o elimine elementos con una mínima modificación del DOM. índices de matriz El uso de claves resulta problemático cuando los elementos pueden reordenarse, insertarse o eliminarse, ya que React podría asociar el estado anterior con el elemento incorrecto, provocando errores sutiles (por ejemplo, valores de entrada o animaciones incorrectos). La mejor práctica es usar un identificador inmutable y específico del dominio, como un ID de base de datos. Si la lista es realmente estática y nunca se reordena, los índices son aceptables, pero esto es la excepción, no la regla.
Ejemplo:
Un tablero Kanban arrastrable debe usar identificadores de tarjeta, no índices, para preservar la identidad de los componentes durante la operación de arrastrar y soltar.
7) ¿Dónde se aplican las técnicas de memoización en React y cuáles son sus ventajas y desventajas?
Respuesta
La memorización reduce los cálculos innecesarios y las renderizaciones repetidas al reutilizar resultados anteriores cuando las entradas no han cambiado. En React, React.memo Salida del componente de caché, useMemo almacena en caché cálculos costosos, y useCallback Almacena en caché las identidades de las funciones que se pasan a sus hijos. Sus principales ventajas son la estabilidad del rendimiento y la reducción del uso de CPU bajo una interacción intensa. Entre sus desventajas se incluyen la complejidad, posibles errores de caché obsoleta si las dependencias son incorrectas y el consumo de memoria.
Tabla: Diferentes formas de memorizar
| Categoría | Proposito | Factores típicos a considerar |
|---|---|---|
React.memo(Component) |
Omitir la renderización si las propiedades son de tipo shallow-equal. | volatilidad de la propiedad, costo infantil |
useMemo(fn, deps) |
Almacenar en caché los valores calculados | Coste de computación frente a memoria |
useCallback(fn, deps) |
identidad de función estable | Corrección de dependencias |
Responda con ejemplos:
Memorizar un conjunto de datos filtrado y ordenado para una cuadrícula usando useMemoy envuelve los componentes del renderizador de celdas con React.memo para evitar tormentas de renderizado.
8) ¿Prefiere componentes controlados o no controlados para los formularios? Analice los beneficios, las desventajas y los tipos de estado del formulario.
Respuesta
Componentes controlados vincular las entradas al estado de React mediante value y onChangeEsto permite la validación, el enmascaramiento y la interfaz de usuario condicional a partir de una única fuente de información. Sus ventajas son la predictibilidad y la fácil integración con otros estados; entre sus desventajas se encuentra el coste de renderizado en cada pulsación de tecla sin optimización. Componentes no controlados Se basa en el DOM como fuente de información veraz mediante referencias, lo que ofrece menor sobrecarga y una configuración más sencilla para formularios básicos, pero una validación menos centralizada. Para flujos de trabajo complejos, es común un patrón híbrido, que utiliza entradas controladas para campos críticos y no controladas para áreas extensas con mucho texto.
Ejemplo:
Un formulario de registro utiliza campos controlados para la validación del correo electrónico y la contraseña, mientras que un área de texto para notas no está controlada para reducir la sobrecarga de renderizado.
9) ¿Cuándo usarías Context en lugar de un hook personalizado, y cuál es la diferencia conceptual entre ellos?
Respuesta
Contexto es un mecanismo de transporte para valores que muchos componentes necesitan, evitando la propagación de propiedades. No gestiona el estado por sí mismo; simplemente lo expone a sus descendientes. gancho personalizado Encapsula lógica reutilizable —combinando estado, efectos y servicios externos— devolviendo valores y funciones. Utilice Context para proporcionar configuración compartida, principalmente de lectura, o para exponer un almacén, y utilice enlaces personalizados para implementar el comportamiento del almacén o para orquestar aspectos como la autenticación, las marcas de características o las políticas de obtención de datos. Ambos son complementarios: un patrón común es useAuth() como un gancho personalizado respaldado por un AuthContext.
Responda con ejemplos:
AuthProvider Suministra usuarios y tokens a través de Context; useAuth Gestiona los efectos secundarios de inicio de sesión, actualización y cierre de sesión.
10) ¿Puede describir estrategias de optimización del rendimiento para aplicaciones React de gran tamaño, incluyendo características de renderizados lentos y puntos críticos del ciclo de vida?
Respuesta
La optimización del rendimiento comienza con la medición. Identifique las rutas lentas utilizando el Profiler de React DevTools y los paneles de rendimiento del navegador para localizar los puntos críticos de reconciliación y las confirmaciones costosas. Las tácticas incluyen: localidad estatal (mantener el estado cerca de sus consumidores), memorización (React.memo, useMemo, useCallback), virtualización de listas para listas largas, división de código con carga diferida para reducir el paquete inicial, y desrebote o limitación Eventos de alta frecuencia. Para datos respaldados por servidor, adopte el almacenamiento en caché con una biblioteca de consultas y aproveche apto para el suspense Patrones para una carga más fluida. Presta atención a los puntos críticos del ciclo de vida, como efectos que se ejecutan con demasiada frecuencia debido a matrices de dependencias extensas, o componentes que se vuelven a renderizar debido a cambios frecuentes en los valores del contexto.
Responda con ejemplos:
Virtualizar una tabla de 10,000 filas utilizando una biblioteca de ventanas; cargar de forma diferida los gráficos pesados mediante la división de código basada en rutas para mejorar la visualización inicial.
11) ¿Cuál es la diferencia entre props y state en React?
Respuesta
Ambos props y state Influyen en cómo se renderizan los componentes, pero su propósito y ciclo de vida difieren fundamentalmente. Accesorios Las propiedades (abreviatura de properties) son entradas inmutables que se pasan de un componente padre a un componente hijo, definiendo la configuración o los datos para la representación. Fluyen hacia abajo en el flujo de datos unidireccional de React y nunca debe ser modificado por el componente receptor. EstadoPor otro lado, es mutable y el componente lo mantiene internamente. Determina el comportamiento dinámico que cambia con el tiempo, como los valores de entrada de un formulario o la visibilidad que se activa o desactiva.
Tabla de diferencias clave:
| Factor | Accesorios | Estado |
|---|---|---|
| Mutabilidad | Inmutable | Mudable |
| Propiedad del activo: | Aprobado por los padres | Propiedad del componente |
| Método de actualización | renderiza nuevamente el elemento padre | useState or setState |
| Caso de uso | Configuration | Cambios dinámicos en la interfaz de usuario |
| Ciclo de Vida | Existe durante el renderizado | Persiste, provoca nuevas renderizaciones |
Ejemplo:
A <Button color="blue" /> utiliza accesorios para decidir el color, mientras que un clicked El valor booleano en su estado activa o desactiva la retroalimentación visual.
12) Explique el patrón de arquitectura de componentes en React y las diferentes formas en que se clasifican los componentes.
Respuesta
Las aplicaciones React siguen un arquitectura basada en componentes, dividiendo la interfaz de usuario en pequeños bloques de construcción reutilizables. Los componentes se pueden categorizar por su propósito y responsabilidad:
- Componentes de presentación (tontos) – Centrarse en la interfaz de usuario, recibir datos a través de props y rara vez gestionar el estado.
- Componentes de contenedores (inteligentes) – Gestionan la lógica, obtienen datos y administran el estado; renderizan componentes de presentación.
- Componentes de orden superior (HOC) – Funciones que toman un componente y devuelven una versión mejorada con comportamiento adicional.
- Componentes puros – Optimizar el rendimiento mediante una comparación superficial de props y estado.
- Componentes funcionales frente a componentes de clase – Actualmente se prefieren los componentes funcionales (con ganchos) para mayor legibilidad y mejor rendimiento.
Ejemplo:
A <UserProfile /> El componente puede ser de presentación, recibiendo información del usuario, mientras que <UserProfileContainer /> Obtiene los datos y gestiona su ciclo de vida.
13) ¿Cómo maneja React los límites de error y por qué son importantes?
Respuesta
Límites de error son componentes especiales de React que capturan JavaDetectan errores de script en cualquier parte del árbol de componentes hijos durante el renderizado, los métodos del ciclo de vida o los constructores. Evitan que la aplicación se bloquee por completo al aislar los fallos en subárboles específicos. Puedes implementar uno usando componentDidCatch(error, info) y static getDerivedStateFromError() en un componente de clase.
Ventajas:
- Preserva la estabilidad de la interfaz de usuario mostrando interfaces de usuario alternativas.
- Capturar y registrar errores para su análisis.
- Evitar desmontajes en cascada.
Ejemplo:
class ErrorBoundary extends React.Component {
state = { hasError: false };
static getDerivedStateFromError() { return { hasError: true }; }
render() { return this.state.hasError ? <h2>Something went wrong.</h2> : this.props.children; }
}
14) ¿Qué son los fragmentos de React y en qué se diferencian de un contenedor? ¿elementos?
Respuesta
React Fragmentos (<></>) permiten agrupar varios elementos sin añadir nodos adicionales al DOM. Esto es esencial para una estructura más limpia, especialmente en listas, tablas y HTML semántico, donde los contenedores adicionales podrían causar problemas de diseño o accesibilidad. A diferencia de los contenedores <div>Los fragmentos no se renderizan en el DOM y, por lo tanto, tienen ventajas de rendimiento y semánticas.
Ejemplo:
return (
<>
<h1>Title</h1>
<p>Description</p>
</>
);
Tabla de diferencias:
| Factor | fragmento | <div> Wrapper |
|---|---|---|
| Salida DOM | Ninguna | Agrega un nodo adicional |
| Caso de uso | Agrupación estructural | Estilo o diseño |
| Rendimiento | Superior | Ligera sobrecarga |
15) ¿Qué Hook de React usarías para la optimización del rendimiento y por qué?
Respuesta
Los componentes de React que dependen del rendimiento suelen depender de ganchos de memorización y carga lenta Para minimizar el trabajo redundante. Algunos métodos comunes incluyen:
useMemo→ Almacena en caché los resultados computacionalmente costosos.useCallback→ Evita renderizaciones innecesarias de elementos secundarios debido a cambios en la identidad de las funciones.useTransition→ Aplaza las actualizaciones no urgentes para una interfaz de usuario más fluida.useDeferredValue→ Retrasa los cálculos pesados hasta después de las interacciones inmediatas.
Ejemplo:
Una gran cuadrícula de datos que utiliza useMemo Los resultados filtrados pueden reducir el consumo de CPU en un 50% o más.
Ventajas:
- Reduce los renderizados innecesarios.
- Mantiene la interfaz de usuario receptiva bajo carga.
Desventaja:
- Requiere precisión en las dependencias; pueden producirse errores de caché obsoletos si se gestionan incorrectamente.
16) ¿Qué son los portales de React y cuáles son sus ventajas?
Respuesta
Portales Permite que los componentes de React rendericen elementos secundarios en un nodo DOM fuera de su jerarquía principal, normalmente para modales, tooltips o menús desplegables que deben "escapar" visualmente de contextos de desbordamiento o apilamiento. Implementado mediante ReactDOM.createPortal(child, container), mantienen la coherencia de la propagación de eventos, por lo que los controladores de eventos funcionan como si el elemento permaneciera dentro de su jerarquía original.
Tabla de ventajas:
| La Ventaja | Descripción |
|---|---|
| Independencia estructural | Renderizar fuera del árbol principal |
| Control CSS/Apilamiento | Evitando overflow: hidden o problemas con el índice Z |
| Propagación de eventos | Los eventos sintéticos de React siguen propagándose correctamente. |
| Reutilización | Ideal para superposiciones globales |
Ejemplo:
createPortal(<ModalContent />, document.getElementById('modal-root'));
17) Explique cómo React Router gestiona la navegación y el estado entre páginas.
Respuesta
React Router es una biblioteca de enrutamiento declarativo que sincroniza la interfaz de usuario con la URL del navegador. Utiliza API de historial para manipular el historial de la sesión sin recargar la página completa. Los conceptos básicos incluyen Rutas , Enlaces y Outlet
para enrutamiento anidado. La biblioteca admite rutas dinámicas, Parámetros de URL y ganchos de navegación (useNavigate, useParams, useLocationReact Router v6 introdujo una sintaxis simplificada y API de datos para cargador y action funciones, mejorando la integración SSR y la gestión del estado.
Ejemplo:
<Route path="/user/:id" element={<UserProfile />} />
Beneficios:
- Permite la navegación en una sola página.
- Mantiene la posición de desplazamiento y el historial.
- Se integra perfectamente con la carga diferida para un mejor rendimiento.
18) ¿Cuáles son las diferentes formas de manejar los efectos secundarios en las aplicaciones React?
Respuesta
Los efectos secundarios se refieren a acciones que afectan a elementos fuera del ámbito de un componente (llamadas a la API, manipulación del DOM, suscripciones). Las principales herramientas incluyen:
useEffectpara efectos del lado del cliente después del renderizado.- Controladores de eventos para efectos impulsados por el usuario.
- Ganchos personalizados para reutilizar la lógica de efectos (por ejemplo,
useFetch). - middleware (como Redux Saga o Thunk) para orquestación asíncrona compleja.
- Consulta de React o SWR para gestionar automáticamente el estado del servidor y los ciclos de vida de recuperación.
Ejemplo:
A useEffect Obtiene los datos una sola vez al montar el dispositivo:
useEffect(() => { fetchData(); }, []);
Ventajas:
Gestión asíncrona simplificada, mejor encapsulación y control del ciclo de vida más claro.
19) ¿Es React un framework o una biblioteca? Analice los factores que definen la diferencia.
Respuesta
React es oficialmente un bibliotecas, no un marco de trabajo completo. Se centra exclusivamente en el capa de vista, proporcionando abstracciones de renderizado, estado y componentes sin imponer enrutamiento, obtención de datos o estructura de compilación.
Tabla de comparación:
| Factor | Biblioteca (React) | Framework (Angular, Vue) |
|---|---|---|
| <b></b><b></b> | Representación de la vista | Arquitectura MVC completa |
| Dogmático | Baja | Alta |
| Controlar la | Impulsado por desarrolladores | Basado en marcos |
| Flexibilidad | Alta | Limitado por convenciones |
| Curva de aprendizaje | Moderada | Mayor debido a la complejidad |
El ecosistema de React (Redux, Router, Query, Next.js) forma efectivamente un “meta-framework”, ofreciendo una capacidad de composición modular que permite a los desarrolladores construir su propia arquitectura.
20) ¿Cuándo se debe usar React.lazy y Suspense, y cuáles son sus ventajas?
Respuesta
React.lazy permite división de código cargando dinámicamente los componentes solo cuando sea necesario, mientras Suspense Proporciona una interfaz de usuario alternativa hasta que el componente esté listo. Esta combinación mejora el rendimiento de carga inicial y la capacidad de respuesta percibida por el usuario.
Ejemplo:
const Chart = React.lazy(() => import('./Chart'));
<Suspense fallback={<Loader />}>
<Chart />
</Suspense>
Tabla de ventajas:
| La Ventaja | Explicación |
|---|---|
| Rendimiento | Carga el código bajo demanda |
| Experiencia de usuario | Alternativa de carga elegante |
| Tamaño del paquete | Paquete inicial más pequeño |
| Facilidad | API nativa de React, configuración mínima |
Mejores Prácticas:
- Agrupa varios componentes perezosos en un límite Suspense.
- Utilice indicadores de accesibilidad alternativos significativos.
21) Explique qué son los componentes de servidor de React (RSC) y sus ventajas.
Respuesta
Los componentes de servidor de React (RSC) son una importante innovación introducida para mejorar el rendimiento y la experiencia del desarrollador al permitir que los componentes renderizar en el servidor sin enviar su JavaGuion para el clienteSe ejecutan completamente en el servidor, obteniendo datos, leyendo de bases de datos o realizando operaciones de E/S de forma segura antes de transmitir la salida serializada al cliente.
Ventajas:
- Tamaño del paquete más pequeño — No se requiere JavaScript del lado del cliente para la lógica exclusiva del servidor.
- Desempeño mejorado — La obtención de datos del lado del servidor reduce los errores de cascada.
- Seguridad — El código confidencial nunca llega al navegador.
- Mejor almacenamiento en caché — Los componentes del servidor se pueden almacenar en caché en el perímetro.
Ejemplo:
A <ProductList /> El componente del servidor puede obtener datos directamente de una base de datos y pasar los resultados a un <ProductCard /> Componente del cliente.
22) ¿Cuál es la diferencia entre hidratación y reconciliación en React?
Respuesta
Si bien ambos términos implican que React actualice la interfaz de usuario, su propósito difiere:
- Reconciliación Es el proceso de comparar el árbol DOM virtual con su versión anterior para determinar el conjunto mínimo de actualizaciones del DOM.
- HidrataciónPor otro lado, está el proceso de adjuntar los listeners de eventos y las estructuras internas de React a HTML renderizado en el servidor En el lado del cliente, se transforma el marcado estático en una aplicación totalmente interactiva.
Tabla de comparación:
| Factor | Reconciliación | Hidratación |
|---|---|---|
| Desencadenar | El cliente vuelve a renderizar | Carga inicial de página (SSR) |
| Proposito | Actualizar el DOM de forma eficiente | Hacer que SSR HTML sea interactivo |
| <b></b><b></b> | Comparación del DOM virtual | Enlace de eventos + reasociación de estado |
| Frecuencia | Varias veces | Una vez después del renderizado SSR |
Ejemplo:
Después de que una aplicación Next.js envía HTML pre-renderizado, React hidratos Esto permite que los componentes respondan a los eventos sin volver a renderizar todo.
23) ¿Cómo mejora la renderización concurrente la experiencia del usuario en React 18+?
Respuesta
La renderización concurrente permite a React interrumpir, pausar o reanudar el trabajo de renderización según la prioridad del usuario. Esto evita que la interfaz de usuario se bloquee durante cálculos intensivos o renderizaciones repetidas. Características como useTransition y useDeferredValue Aprovechar esta capacidad para separar Actualizaciones urgentes (como escribir) desde no urgente algunas (como el filtrado).
Beneficios:
- Interacciones fluidas y receptivas.
- Se utiliza la segmentación temporal para evitar bloquear el hilo principal.
- Priorización predecible para una mejor experiencia de usuario.
Ejemplo:
const [isPending, startTransition] = useTransition(); startTransition(() => setFilteredList(filter(items, term)));
Aquí, la escritura sigue siendo fluida incluso al filtrar grandes conjuntos de datos porque React programa las actualizaciones no urgentes de forma concurrente.
24) ¿Cuáles son las diferentes formas de realizar pruebas en aplicaciones React?
Respuesta
Las pruebas de React se pueden clasificar en unidad, de contacto y soluciones integrales .
Tabla de métodos de prueba:
| Categoría | Proposito | |
|---|---|---|
| Unidad | Broma | Prueba de funciones/componentes aislados |
| Integración: | Biblioteca de pruebas de reacción | Prueba las interacciones de la interfaz de usuario y los cambios de estado. |
| E2E | Cypress Dramaturgo | Prueba los flujos de usuario en navegadores reales |
Mejores Prácticas:
- Utilice Biblioteca de pruebas de reacción sobre Enzyme (moderno, orientado a DOM).
- API simuladas que utilizan
msw(Trabajador de servicio simulado). - Evite probar los detalles de implementación; concéntrese en el comportamiento.
Ejemplo:
test('renders user name', () => {
render(<User name="Alice" />);
expect(screen.getByText(/Alice/)).toBeInTheDocument();
});
25) ¿Qué herramientas de compilación y empaquetadores se utilizan más comúnmente con React y cuáles son sus diferencias?
Respuesta
React puede integrarse con varios empaquetadores y compiladores, cada uno optimizado para diferentes casos de uso.
Tabla de comparación:
| Características | Ventajas | Desventajas | |
|---|---|---|---|
| Webpack | Altamente configurable | Maduro, con gran cantidad de plugins | Configuración compleja |
| tornillo | Servidor de desarrollo ultrarrápido basado en ESM | HMR instantáneo, sintaxis moderna | Compatibilidad limitada con plugins heredados |
| Paquete | Configuración cero | Autooptimización | Less flexible |
| esconstruir | compilador basado en Go | Extremadamente rápido | Menos complementos del ecosistema |
Ejemplo:
Los proyectos modernos a menudo adoptan tornillo para la velocidad de desarrollo y esconstruir en pipelines de CI/CD para compilaciones de producción eficientes.
26) ¿Cómo amplía Next.js las capacidades de React?
Respuesta
Next.js es un Reaccionar marco Proporciona una arquitectura con preferencias definidas para el enrutamiento, la renderización del lado del servidor (SSR) y la generación estática. Introduce modelos de renderizado híbridos, rutas de API y características de despliegue preparadas para el borde.
Ventajas:
- Incorporado SSR/SSG/ISR apoyo.
- Enrutador de aplicaciones con componentes de servidor React.
- Optimización de imagen y middleware para el rendimiento y la seguridad.
- Rutas API sencillas para funciones sin servidor.
Ejemplo:
app/page.js para páginas renderizadas mediante SSR; app/api/route.js para los puntos de conexión del servidor.
En resumenNext.js permite crear aplicaciones React de nivel de producción con una configuración mínima.
27) ¿Cuáles son algunos problemas de rendimiento comunes en React y cómo se pueden evitar?
Respuesta
Algunos problemas comunes de rendimiento en React incluyen:
- Renderizaciones innecesarias — Corregir usando
React.memoo dividiendo componentes. - Creación de objetos/matrices en línea - Usar
useMemopara referencias estables. - listas largas — Implementar el uso de ventanas (
react-window,react-virtualized). - cálculos pesados — Memorizar o descargar a trabajadores web.
- Uso excesivo del contexto — Las actualizaciones frecuentes se propagan profundamente; se prefiere el estado derivado.
Ejemplo:
Si pasa { a: 1 } Al estar integrado en un componente memorizado, se vuelve a renderizar en cada renderizado del componente padre. Se soluciona memorizando el objeto.
Tabla de consejos de rendimiento:
| Problema | Técnica de optimización |
|---|---|
| Re-renders | React.memo, useCallback |
| Cálculos costosos | useMemoTrabajadores web |
| Grandes conjuntos de datos | Virtualization |
| Actualizaciones frecuentes del contexto | Localizar estado |
28) Explique la diferencia entre useReducer y useState.
Respuesta
Ambos hooks gestionan el estado, pero difieren en complejidad y control.
useStatees ideal para transiciones de estado simples y aisladas.useReducercentraliza la lógica de estado compleja en un función reductora, utilizandodispatchacciones para actualizaciones predecibles.
Tabla de comparación:
| Factor | usoEstado | usarreductor |
|---|---|---|
| Sintaxis | [value, setValue] |
[state, dispatch] |
| Complejidad: | Fácil | Moderado a complejo |
| Caso de uso | Estados independientes | Estados relacionados o anidados |
| Depuración | Less verboso | Más fácil mediante acciones registradas |
| Ejemplo | alternancias de formulario | Validación de formularios o formularios de varios pasos |
Ejemplo:
const [state, dispatch] = useReducer(reducer, { count: 0 });
dispatch({ type: 'increment' });
29) ¿Cómo se puede mejorar la accesibilidad (a11y) en las aplicaciones React?
Respuesta
La accesibilidad garantiza que todos los usuarios, incluidas las personas con discapacidad, puedan usar tu aplicación de forma eficaz. React facilita la accesibilidad mediante el marcado semántico y los atributos ARIA.
Mejores Prácticas:
- Use HTML semántico (
<button>vs<div onClick>). - Gestiona la concentración usando
refytabIndex. - Utilice roles ARIA para componentes dinámicos.
- Asegurar el contraste de color y las alternativas de texto para las imágenes.
- Aprovechar herramientas como complemento-eslint-jsx-a11y y núcleo de hacha para auditorías.
Ejemplo:
<button aria-label="Close dialog" onClick={closeModal}>×</button>
Ventajas:
- Alcance de audiencia más amplio.
- Mejora del SEO.
- Cumplimiento de los estándares WCAG.
30) ¿Puede describir en qué se diferencian la división de código y la carga diferida, y cuándo conviene usar cada una?
Respuesta
Ambas técnicas optimizan el tamaño del paquete y el rendimiento de la carga, pero difieren en tiempo de ejecución.
- División de código Divide los paquetes grandes en fragmentos más pequeños que se pueden cargar de forma independiente.
- Carga Diferida Retrasa la carga de esos fragmentos hasta que sean necesarios.
Tabla de comparación:
| Factor | División de código | Carga Diferida (Lazy Loading) |
|---|---|---|
| Definición | Divide el código en fragmentos. | Carga fragmentos bajo demanda |
| Webpack, Vite | React.lazydinámico import() |
|
| Proposito | Optimizar el tamaño del paquete | Mejora del rendimiento en tiempo de ejecución |
| Ejecución | Tiempo de compilación | Runtime |
Ejemplo:
const Settings = React.lazy(() => import('./Settings'));
Utilizadas conjuntamente, estas técnicas reducen el tiempo de interacción y mejoran la velocidad percibida de las aplicaciones grandes.
31) Explique el concepto de Render Props y cómo difiere de los componentes de orden superior (HOC).
Respuesta
Propiedades de renderizado es un patrón en React donde un componente acepta un función como una propiedad Eso le indica qué debe renderizar. Esto permite que la lógica de los componentes se comparta entre varios componentes sin duplicación.
Los HOC, por otro lado, envolver un componente y devolver una versión mejorada con propiedades o comportamientos inyectados.
Tabla de comparación:
| Factor | Propiedades de renderizado | HOC |
|---|---|---|
| Implementación | Función como niño | componente de envoltura de función |
| Composición | Control en línea | envoltura declarativa |
| Legibilidad | A menudo más claro | Puede causar un infierno de envoltorios |
| Caso de uso | Lógica de renderizado dinámico | Preocupaciones transversales |
Ejemplo:
<DataProvider render={data => <UserList users={data} />} />
Los Render Props ofrecen mayor flexibilidad y evitan las colisiones de nombres comunes en los HOC.
32) ¿Cuáles son los diferentes tipos de ganchos personalizados y sus ventajas?
Respuesta
Los hooks personalizados encapsulan lógica reutilizable que combina estado, efectos secundarios y utilidades. Mejoran la reutilización del código, la separación de responsabilidades y la capacidad de realizar pruebas.
Tipos y ejemplos:
- ganchos de gestión estatal –
useToggle,useForm. - Ganchos de recuperación de datos –
useFetch,useQuery. - Ganchos de UI/UX –
useWindowSize,useDarkMode. - ganchos de integración –
useLocalStorage,useMediaQuery. - Ganchos de rendimiento –
useDebounce,useThrottle.
Ventajas:
- Reutilización de lógica centralizada.
- Componentes más limpios.
- Pruebas independientes.
Ejemplo:
function useLocalStorage(key, initial) {
const [value, setValue] = useState(() => JSON.parse(localStorage.getItem(key)) || initial);
useEffect(() => localStorage.setItem(key, JSON.stringify(value)), [value]);
return [value, setValue];
}
33) ¿Cómo se manejan las fugas de memoria en las aplicaciones React?
Respuesta
Las fugas de memoria se producen cuando los componentes no montados aún mantienen referencias a recursos o suscripciones. Estas degradan el rendimiento y provocan un comportamiento impredecible.
Técnicas de prevención:
- efectos de limpieza in
useEffect: useEffect(() => { const id = setInterval(logData, 1000); return () => clearInterval(id); }, []); - Cancelar llamadas asíncronas usando
AbortController. - Evite conservar cierres obsoletos. Haciendo referencia a accesorios/estados antiguos.
- Cancelar la suscripción a eventos o sockets al desmontar.
- Utiliza React Profiler para detectar un crecimiento lento de la memoria.
Ejemplo:
En una aplicación de chat, siempre desconecte los escuchadores de sockets cuando un usuario abandone la sala de chat.
34) ¿Cuáles son las mejores prácticas para administrar formularios en aplicaciones React grandes?
Respuesta
Gestionar formularios en aplicaciones React a escala empresarial requiere un equilibrio entre control, rendimiento y mantenibilidad.
Mejores Prácticas:
- Utilice bibliotecas como formik, Reaccionar forma de gancho o Forma definitiva para validación y registro de campo.
- Agrupe los campos relacionados utilizando componentes o contextos anidados.
- Aplicar validación de esquemas (Sí, Zod) por coherencia.
- Evitar el rebote en validaciones pesadas o comprobaciones de API.
- Mantenga el estado del formulario localizado a menos que sea necesario globalmente.
Ejemplo:
React Hook Form minimiza las renderizaciones repetidas al aislar el estado de entrada.
const { register, handleSubmit } = useForm();
<input {...register('email', { required: true })} />
35) ¿Qué patrones de diseño son más útiles en el desarrollo de React y cuáles son sus características?
Respuesta
React se presta de forma natural a varios patrones de diseño de software para una arquitectura de interfaz de usuario mantenible y escalable.
| Patrón de Costura | Descripción | Ejemplo |
|---|---|---|
| Contenedor-Presentador | Separar la lógica (contenedor) de la interfaz de usuario (presentador). | Contenedor de datos → Componente de interfaz de usuario |
| Controlado-Incontrolado | Gestionar los datos del formulario mediante el estado frente al DOM | Formik frente a entradas sin procesar |
| Componentes compuestos | Los padres controlan la composición de los hijos | <Tabs><Tab /></Tabs> |
| Patrón del proveedor | Compartir estado a través del contexto | Proveedor de temas |
| Patrón de ganchos | Reutilizar la lógica con estado | useAuth, useFetch |
Ejemplo:
A Tabs El componente expone el contexto, por lo que <Tab> Los niños se registran automáticamente — una aplicación limpia de Componente compuesto patrón.
36) ¿Cuáles son las principales diferencias entre React 18 y React 19?
Respuesta
React 19 se basa en la sólida base concurrente de React 18 con importantes nuevas capacidades.
| Característica | Reaccionar 18 | Reaccionar 19 |
|---|---|---|
| Representación simultánea | Introdujo | Mejorado con mayor suspense |
| Componentes del servidor | Emparejamiento | Estabilizado e integrado |
| API de acciones | No disponible | Nuevo estándar para el manejo de acciones de formularios |
| Carga de activos | Manual | Carga automática de recursos |
| Manejo de errores mejorado | Básico | Granular con ganchos de límite |
Beneficios claves:
React 19 se centra en mutaciones de datos más simples, acciones de formulario integradas y control asíncrono mejorado, lo que hace que la hidratación progresiva y la liberación de calor sean más fluidas.
37) ¿Cómo funciona el microfrontend? Archi¿Cómo se integra la tecnología con React y cuáles son sus ventajas?
Respuesta
Los microfrontends dividen una aplicación web grande en módulos frontend independientes y desplegables. En un ecosistema React, cada microfrontend es una aplicación independiente que se puede integrar mediante Federación de módulos, iframes o cargadores de tiempo de ejecución personalizados.
Ventajas:
- Despliegue y escalado independientes.
- Autonomía del equipo en todas las plataformas tecnológicas.
- Procesos de compilación más rápidos.
Ejemplo:
El uso de Federación de módulos WebpackLos equipos pueden exponer componentes de React en diferentes aplicaciones de forma dinámica:
exposes: { './NavBar': './src/NavBar' }
Desventajas:
- Complejidad de gestión estatal compartida.
- Sobrecarga de rendimiento derivada de paquetes aislados.
38) ¿Cuáles son los factores que considera para escalar una aplicación React en producción?
Respuesta
Escalar aplicaciones React implica consideraciones técnicas, arquitectónicas y operativas.
Factores clave:
- Estructura de código — adoptar monorepos (Nx/Turborepo) para compartir código modular.
- Administración del Estado — segmentación de estados locales, globales y de servidor.
- Rendimiento — Carga diferida, memorización, almacenamiento en caché de CDN.
- Monitoring — Utilice Sentry, Datadog o LogRocket para errores y métricas.
- Pruebas y CI/CD — canalizaciones automatizadas y pruebas de regresión visuales.
Ejemplo:
Una gran plataforma de comercio electrónico escala aplicaciones React utilizando Next.js para SSR, Redux Toolkit para un estado predecible y microfrontends para verticales aisladas.
39) ¿Cómo se prueban los componentes de React que utilizan un comportamiento asíncrono?
Respuesta
Probar componentes asíncronos de React requiere la sincronización entre el ejecutor de pruebas y las actualizaciones de estado del componente.
Mejores Prácticas:
- Use
waitFororfindBy*Consultas en la biblioteca de pruebas de React. - Simula llamadas de obtención o API utilizando
msw. - Utilice temporizadores falsos (
jest.useFakeTimers()) para efectos basados en tiempo de espera.
Ejemplo:
test('loads and displays data', async () => {
render(<UserList />);
expect(await screen.findByText('Alice')).toBeInTheDocument();
});
Esto garantiza que la prueba espere las actualizaciones asíncronas de React antes de realizar las aserciones.
40) Explique cómo diseñaría una estructura de proyecto React a gran escala y mantenible.
Respuesta
Un proyecto React escalable debe equilibrar la modularidad, la claridad y la colaboración en equipo.
Estructura de carpetas recomendada:
src/ ├── components/ # Reusable UI elements ├── features/ # Feature-specific modules ├── hooks/ # Custom reusable hooks ├── context/ # Global providers ├── pages/ # Route-level views ├── services/ # API and utilities ├── assets/ # Static resources ├── tests/ # Unit & integration tests └── index.js
Mejores Prácticas:
- Utilice importaciones absolutas con alias de ruta.
- Mantén un linting estricto (ESLint + Prettier).
- Use TypeScript para la seguridad de tipos.
- Refuerce los límites de los componentes mediante diseño atómico o segmentación basada en características.
Ejemplo:
En un entorno real, una función de "Usuario" podría incluir UserSlice.js, UserAPI.js, UserCard.jsx y User.test.js, todo dentro src/features/user/.
🔍 Principales preguntas de entrevista sobre React.js con escenarios reales y respuestas estratégicas
1) ¿Cuáles son las principales diferencias entre los componentes funcionales y los componentes de clase en React.js?
Se espera del candidato: El entrevistador quiere evaluar tu comprensión de la arquitectura de componentes de React y las mejores prácticas modernas.
Respuesta de ejemplo:
Los componentes funcionales son más simples y se basan en hooks para gestionar el estado y los métodos del ciclo de vida, mientras que los componentes de clase utilizan this y métodos de ciclo de vida como componentDidMountEn general, hoy en día se prefieren los componentes funcionales porque fomentan un código más limpio, son más fáciles de probar y ofrecen un mejor rendimiento gracias a las optimizaciones en el proceso de renderizado de React.
2) ¿Puedes explicar cómo funciona el DOM virtual en React?
Se espera del candidato: El entrevistador quiere evaluar tu comprensión del mecanismo de rendimiento principal de React.
Respuesta de ejemplo:
El DOM virtual es una representación en memoria del DOM real. Cuando cambia el estado de un componente, React primero actualiza el DOM virtual, lo compara con la versión anterior mediante un proceso llamado "diffing" y, a continuación, actualiza solo las partes del DOM real que han cambiado. Este enfoque mejora el rendimiento al minimizar la manipulación directa del DOM.
3) ¿Cómo se gestiona el estado en una aplicación React a gran escala?
Se espera del candidato: El entrevistador quiere conocer su experiencia con técnicas y herramientas de gestión estatal.
Respuesta de ejemplo:
En aplicaciones grandes, suelo usar bibliotecas de gestión de estado centralizadas como Redux o Zustand. Redux proporciona un flujo de datos predecible y facilita la depuración gracias a sus herramientas de depuración con seguimiento del tiempo. Para aplicaciones más sencillas, prefiero usar la API de Contexto y los hooks para evitar complejidades innecesarias.
4) Describe una ocasión en la que optimizaste el rendimiento de React.
Se espera del candidato: El entrevistador quiere comprender su experiencia práctica en optimización del rendimiento.
Respuesta de ejemplo:
En mi puesto anterior, nuestra aplicación se renderizaba excesivamente debido a cambios de estado innecesarios. Utilicé React.memo y el useCallback Implementé un hook para evitar renderizados innecesarios. También analicé el rendimiento con React Profiler e identifiqué los componentes que necesitaban memoización, lo que redujo el tiempo de renderizado en casi un 30%.
5) ¿Cómo se manejan los efectos secundarios en React?
Se espera del candidato: El entrevistador quiere evaluar tu comprensión de los hooks y la gestión del ciclo de vida.
Respuesta de ejemplo:
“Manejo los efectos secundarios, como las llamadas a la API o las manipulaciones del DOM, utilizando el useEffect El gancho me permite especificar dependencias, asegurando que el efecto se ejecute solo cuando cambien esas dependencias. Esto ayuda a mantener un comportamiento predecible y a evitar bucles infinitos.
6) Cuéntame sobre un error difícil que hayas enfrentado en un proyecto de React y cómo lo resolviste.
Se espera del candidato: El entrevistador quiere evaluar tus habilidades para resolver problemas y depurar código.
Respuesta de ejemplo:
“En un puesto anterior, encontré un error por el cual las actualizaciones de estado no se reflejaban en la interfaz de usuario. Tras investigar, me di cuenta de que el problema se debía a la modificación directa del objeto de estado en lugar de crear una copia nueva. Refactoricé el código para usar actualizaciones inmutables, lo que resolvió el problema y mejoró la consistencia de los datos.”
7) ¿Cómo se maneja la validación de formularios en aplicaciones React?
Se espera del candidato: El entrevistador quiere comprobar si usted entiende cómo implementar la validación de la entrada del usuario.
Respuesta de ejemplo:
“Normalmente uso componentes controlados para gestionar las entradas de formularios, combinados con bibliotecas como Formik o React Hook Form para la validación. Estas herramientas simplifican el manejo de errores, la gestión del estado del formulario y la integración con bibliotecas de validación de terceros como Yup.”
8) Describe una situación en la que tuviste que colaborar con desarrolladores de backend mientras trabajabas en un proyecto de React.
Se espera del candidato: El entrevistador quiere evaluar tus habilidades de trabajo en equipo y comunicación.
Respuesta de ejemplo:
En mi último puesto, colaboré estrechamente con desarrolladores de backend para diseñar las API REST de una aplicación de panel de control. Acordamos los formatos de datos y los endpoints durante las primeras etapas del desarrollo. También creé respuestas de prueba para continuar el desarrollo del frontend mientras se construía el backend, lo que garantizó una integración fluida posteriormente.
9) ¿Cómo te aseguras de que tus componentes de React sean reutilizables y mantenibles?
Se espera del candidato: El entrevistador quiere conocer su enfoque sobre el diseño de componentes y la escalabilidad.
Respuesta de ejemplo:
“Sigo el principio de crear componentes pequeños y específicos que se encargan de una sola función. También utilizo props para mayor flexibilidad y mantengo el estilo modular con CSS-in-JS o styled-components. Esto garantiza que los componentes se puedan reutilizar y mantener fácilmente en todo el proyecto.”
10) ¿Cómo te mantienes al día con las tendencias y las mejores prácticas de React.js?
Se espera del candidato: El entrevistador quiere evaluar su compromiso con el aprendizaje continuo.
Respuesta de ejemplo:
Me mantengo al día siguiendo la documentación oficial de React y los blogs de la comunidad. También veo charlas de conferencias de React como React Conf y escucho podcasts como 'React Podcast'. Estos recursos me ayudan a estar informado sobre nuevas características como el renderizado concurrente y los componentes de servidor.
