Entrevistar a un desarrollador front-end React puede ser difícil si no conoces la biblioteca. Estas 50 preguntas de entrevista React, con respuestas de referencia, te preparan para la entrevista técnica y te ayudan a identificar a los perfiles más preparados para tu proyecto.
React es una biblioteca de JavaScript para construir interfaces de usuario, creada en Meta (antes Facebook). El desarrollador front-end React crea interfaces para sitios web y aplicaciones con ella.
Antes de entrevistar, reúnete con el equipo técnico para definir el perfil y evalúa según el nivel de seniority. Cuida también la experiencia del candidato: informa cada etapa y los siguientes pasos después de la entrevista técnica. Adapta las preguntas de entrevista React a las necesidades reales del proyecto.
Preguntas de entrevista React para nivel Junior
En este nivel, busca dominio de los conceptos básicos de React, de JavaScript y de los fundamentos del front-end.
1. ¿Qué es React?
Una biblioteca de JavaScript para construir interfaces de usuario con componentes reutilizables.
Qué observar: que diferencie biblioteca de framework y no confunda React con un framework completo.
2. ¿Para qué sirve React?
Para crear interfaces dinámicas y eficientes, sobre todo aplicaciones de una sola página (SPA).
Qué observar: que mencione SPA y también aplicaciones con renderizado en el servidor.
3. ¿Cuáles son sus principales ventajas?
Reutilización de componentes, el Virtual DOM para un mejor desempeño y una comunidad muy grande.
Qué observar: que explique por qué los componentes reutilizables aceleran al equipo, con un ejemplo.
4. ¿Qué son los componentes y cómo se crean?
Bloques reutilizables que definen una parte de la interfaz. Se crean como funciones (lo habitual hoy) o clases que devuelven JSX.
Qué observar: que hoy use componentes funcionales por defecto.
5. ¿Qué diferencia hay entre componentes funcionales y de clase?
Los funcionales son funciones que devuelven JSX y usan hooks para estado y efectos. Los de clase usan métodos de ciclo de vida y eran necesarios para manejar estado antes de los hooks.
Qué observar: que sepa leer código de clase en proyectos legados, aunque no lo escriba.
6. ¿Qué es JSX y por qué se usa?
Una sintaxis que combina marcado parecido a HTML con JavaScript y hace la interfaz más legible.
Qué observar: que entienda que JSX se transforma en llamadas de JavaScript.
7. ¿Qué diferencia hay entre state y props?
El state lo maneja el propio componente y puede cambiar. Las props llegan del componente padre y el hijo no las modifica.
Qué observar: un ejemplo de cuándo subir el estado al componente padre.
8. ¿Cómo creas refs?
Con el hook useRef() en componentes funcionales, o React.createRef() en clases, para acceder a elementos del DOM o guardar valores mutables.
Qué observar: cuándo usar refs y cuándo es mejor evitarlas.
9. ¿Qué es un evento en React?
Una interacción del usuario, como un clic, que se maneja con funciones en props en camelCase, por ejemplo onClick.
Qué observar: que sepa que React usa eventos sintéticos.
10. ¿Qué es el flujo de datos unidireccional?
Los datos fluyen de padres a hijos. El patrón Flux, que inspiró a Redux, organiza ese flujo y facilita depurar y mantener la aplicación.
Qué observar: que entienda por qué el flujo en una sola dirección facilita depurar.
11. ¿Se puede usar HTML en React?
Se usa JSX, que se parece a HTML pero tiene diferencias, como className en lugar de class.
Qué observar: diferencias concretas entre JSX y HTML, como className y htmlFor.
12. ¿Qué son las props?
Datos que un componente padre pasa a un hijo para personalizarlo y comunicarse con él.
Qué observar: que no modifique props dentro del componente hijo.
13. ¿Qué es un HOC?
Un Higher-Order Component: una función que recibe un componente y devuelve otro, para reutilizar lógica. Hoy los hooks personalizados cubren muchos de esos casos.
Qué observar: que conozca los hooks personalizados como alternativa moderna.
14. ¿Qué es Redux?
Una biblioteca de gestión de estado que centraliza el estado de la aplicación con un flujo predecible.
Qué observar: cuándo Redux vale la pena y cuándo es demasiado para el proyecto.
15. ¿Qué es la arquitectura MVC?
Separa datos (Model), interfaz (View) y control de interacciones (Controller). React se enfoca en la capa de vista.
Qué observar: que ubique a React en la capa de vista.
16. ¿Qué significan los tres puntos en React?
Son el operador spread (…), que copia o expande propiedades de objetos y arreglos.
Qué observar: uso práctico del spread para copiar estado sin mutarlo.
Preguntas de entrevista React para nivel Semi Senior
Aquí evalúa el dominio de las funcionalidades más complejas y la capacidad de explicar decisiones.
17. ¿Qué es el Virtual DOM y cómo mejora el desempeño?
Una representación ligera del DOM. React compara versiones y actualiza solo lo que cambió en el DOM real.
Qué observar: que sepa que el Virtual DOM no es magia y tiene costo.
18. ¿Cómo manejas el estado con useState?
useState devuelve el valor actual y una función para actualizarlo; al cambiar, el componente se vuelve a renderizar.
Qué observar: que entienda que las actualizaciones de estado pueden agruparse.
19. ¿Qué son los hooks?
Funciones que permiten usar estado, efectos y otras capacidades de React en componentes funcionales.
Qué observar: las reglas de los hooks: solo en el nivel superior y solo en componentes o hooks.
20. Menciona ejemplos de hooks.
useState, useEffect, useContext, useReducer, useMemo, useCallback y useRef.
Qué observar: que explique para qué sirve cada hook, no solo que lo nombre.
21. ¿Cómo implementas rutas con React Router?
Con react-router-dom, definiendo rutas con Routes y Route, por ejemplo una ruta con path y el componente en element.
Qué observar: experiencia con rutas anidadas y protegidas.
22. ¿Qué son los fragments y cuándo los usas?
React.Fragment o la sintaxis corta agrupan varios elementos sin agregar nodos extra al DOM.
Qué observar: un caso real en el que un fragment evitó un div innecesario.
23. ¿Qué es una función pura?
Una función que siempre devuelve el mismo resultado para los mismos argumentos y no produce efectos secundarios.
Qué observar: conexión con componentes predecibles y fáciles de probar.
24. ¿Qué hace render()?
En componentes de clase, devuelve el JSX que describe cómo se muestra el componente.
Qué observar: que sepa que render() solo existe en componentes de clase.
25. ¿Qué diferencia hay entre React y React Native?
React crea aplicaciones web; React Native, aplicaciones móviles nativas con componentes propios de cada plataforma.
Qué observar: que conozca las limitaciones de compartir código entre web y apps móviles.
26. ¿Qué diferencia hay entre componente y elemento?
Un componente es una función o clase que devuelve JSX. Un elemento es el objeto que resulta de ese JSX y describe lo que se ve en pantalla.
Qué observar: que distinga claramente la definición del resultado renderizado.
27. ¿Cómo nombras los componentes?
En PascalCase, como MyComponent, para distinguirlos de las etiquetas HTML.
Qué observar: que tenga convenciones de nombre y organización de archivos.
28. ¿Qué son los componentes puros?
Componentes que solo se vuelven a renderizar cuando cambian sus props o estado, con una comparación superficial. En clases se usa PureComponent; en funciones, React.memo.
Qué observar: que no use React.memo en todo, sino donde mide un beneficio.
29. ¿Para qué sirve la key en listas?
Ayuda a React a identificar cada elemento de una lista y actualizar solo lo necesario.
Qué observar: que no use el índice del arreglo como key en listas que cambian.
30. ¿Cómo manejas eventos?
Asignando funciones a props en camelCase, como onClick, que normalmente apuntan a una función del componente.
Qué observar: manejo de eventos con parámetros sin crear problemas de rendimiento.
31. ¿Cómo validas props?
Con TypeScript o con PropTypes, para asegurar que el componente reciba los datos esperados.
Qué observar: preferencia por TypeScript en proyectos nuevos, con argumentos.
32. ¿Qué son los error boundaries?
Componentes que capturan errores en sus hijos durante el render y muestran una interfaz alternativa sin romper toda la aplicación.
Qué observar: que sepa que no capturan errores en eventos ni código asíncrono.
33. ¿Qué es StrictMode?
Una herramienta de desarrollo que señala patrones problemáticos y APIs obsoletas, sin afectar producción.
Qué observar: que sepa que StrictMode ejecuta algunos efectos dos veces en desarrollo.
Valida React con un reto práctico antes de entrevistar
En Coodesh aplicas retos de React en un entorno de código real, con calificación automática y antifraude. Prueba gratis las pruebas técnicas.
Preguntas de entrevista React para nivel Senior
El Senior lidera proyectos y guía a otros desarrolladores. Observa cómo resuelve problemas complejos, cómo optimiza aplicaciones y cómo usa los recursos avanzados de React.
34. ¿Cómo optimizas el tiempo de carga de una aplicación React?
Con lazy loading, code splitting con React.lazy y Suspense, memoización y evitando renderizados innecesarios.
Qué observar: que mida antes de optimizar, con herramientas como el Profiler.
35. ¿Qué es la memoización y cómo se implementa?
Guardar resultados calculados para no repetir trabajo. En React: React.memo para componentes y useMemo o useCallback para valores y funciones.
Qué observar: que entienda el costo de memoizar de más.
36. ¿Cómo usas React.memo?
Envuelve un componente funcional para evitar que se renderice de nuevo si sus props no cambian, con comparación superficial por defecto.
Qué observar: un ejemplo en el que React.memo realmente mejoró el rendimiento.
37. ¿Cómo manejas estado global con Redux o Context API?
Con Redux, creando un store y conectando componentes con Provider, useSelector y useDispatch. Con Context API, con createContext, Provider y useContext.
Qué observar: criterio para elegir entre Context, Redux u otras bibliotecas de estado.
38. ¿Qué es el Server-Side Rendering y cómo lo implementas?
Generar el HTML en el servidor antes de enviarlo al navegador. Frameworks como Next.js lo traen listo.
Qué observar: diferencias entre SSR, SSG y renderizado en el cliente.
39. ¿Cómo haces pruebas unitarias de componentes?
Con Jest y React Testing Library, probando renderizado, eventos y estado de componentes aislados.
Qué observar: pruebas enfocadas en lo que ve el usuario.
40. ¿Qué son Jest y React Testing Library?
Jest ejecuta las pruebas. React Testing Library prueba componentes desde el comportamiento del usuario, no desde la implementación.
Qué observar: que prefiera consultas por rol o texto en lugar de por clases CSS.
41. ¿Cómo defines un estilo inline?
Con la prop style, que recibe un objeto con propiedades CSS en camelCase, como backgroundColor.
Qué observar: que conozca las limitaciones de los estilos inline.
42. ¿Qué formas hay de dar estilo a una app React?
CSS tradicional, CSS Modules, bibliotecas como Styled Components o Emotion, frameworks como Tailwind y estilos inline.
Qué observar: que justifique la elección de estilos según el tamaño del proyecto.
43. ¿Cómo organizas reducers grandes?
Dividiéndolos y uniéndolos con combineReducers, o con useReducer para estados locales complejos.
Qué observar: que mantenga los reducers puros y pequeños.
44. ¿Por qué usar windowing?
Bibliotecas como react-window renderizan solo los elementos visibles de listas grandes y ahorran memoria y tiempo.
Qué observar: experiencia con listas grandes en producción.
45. ¿Cómo manejas formularios?
Como componentes controlados con estado, o no controlados con refs, según la complejidad del formulario.
Qué observar: cuándo usar formularios controlados y cuándo una biblioteca de formularios.
46. ¿Qué diferencia hay entre ES5 y ES6?
ES6 trajo let y const, arrow functions, clases, destructuring y módulos con import y export.
Qué observar: dominio de las funcionalidades modernas de JavaScript más allá de ES6.
47. ¿Cómo funciona useEffect?
Ejecuta efectos secundarios, como pedir datos, después del render. El arreglo de dependencias controla cuándo se vuelve a ejecutar.
Qué observar: que sepa limpiar efectos para evitar fugas de memoria.
48. ¿Se pueden pasar elementos JSX a otros componentes?
Sí, como children o props, lo que permite composición y layouts flexibles.
Qué observar: que entienda la composición como alternativa a la herencia.
49. ¿Por qué usar prop-types?
Valida tipos y formato de las props en desarrollo. En proyectos con TypeScript, los tipos cumplen ese papel.
Qué observar: que sepa que en proyectos modernos TypeScript reemplaza a prop-types.
50. ¿Para qué sirve ReactDOM?
Conecta React con el DOM del navegador. Desde React 18 se usa createRoot para renderizar la aplicación.
Qué observar: que conozca los cambios de las versiones recientes de React.
Señales de alerta en las preguntas de entrevista React
- Responde con definiciones de memoria, sin ningún ejemplo de proyecto propio.
- Usa componentes de clase como primera opción en código nuevo.
- Optimiza todo con memo, useMemo y useCallback sin haber medido un problema.
- No sabe explicar cuándo poner estado en un componente y cuándo en un estado global.
- No escribe pruebas o las considera trabajo de otra área.
- No conoce los cambios de las versiones recientes de React ni del ecosistema que usa.
Cuándo usar estas preguntas de entrevista React
- En el proceso de selección: en la entrevista técnica, con candidatos que ya pasaron el filtro, para validar lo que dice el currículum y observar comunicación y escucha.
- En el mapeo de habilidades: para evaluar a tu propio equipo. Si quieres comparar desempeño con más rigor, usa pruebas técnicas con calificación automática.
Retos prácticos para desarrolladores React
- Crear un formulario interactivo con hooks y validación.
- Configurar rutas dinámicas con React Router.
- Optimizar una aplicación existente y explicar qué cambió y por qué.
Lee también
- Pruebas técnicas para programadores: cómo evaluar desarrolladores con una prueba de código en línea
- Preguntas de entrevista para QA: 50 preguntas para encontrar al profesional ideal
- Contratación basada en habilidades
- Pruebas técnicas de Coodesh: desafíos de código, SQL, QA y más
Conclusión
Estas preguntas de entrevista React ayudan a conducir la entrevista técnica según la necesidad del proyecto y el nivel de cada candidato. Combínalas con un reto práctico para ver cómo la persona trabaja, no solo lo que sabe explicar.
Evalúa desarrolladores React con evidencia
Coodesh se especializa en evaluación técnica: retos de código reales, calificación automática con IA y reportes comparables para contratar con más rapidez.
Prueba gratis las pruebas técnicas de Coodesh
¿Tu empresa es grande o necesita algo a medida? Agenda una demo con nuestro equipo.
