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