60 preguntas de entrevista de React con respuestas breves y precisas y código: fundamentos, hooks, estado, renderizado y rendimiento, patrones, Server Components y React 19, y testing. Filtra por tema y nivel.
Estas 60 preguntas de entrevista de React cubren lo que más se pregunta: JSX, props y estado, hooks como useState y useEffect, keys, renderizado y memo, context, error boundaries, Server Components y novedades de React 19 como useActionState. Cada una tiene una respuesta breve y clara, muchas con código, y puedes filtrar por tema y nivel.
Cómo se reparten las preguntas
Usa los filtros para practicar un área concreta, abre una respuesta solo después de haber dicho la tuya en voz alta, y lee los ejemplos de código como el tipo de cosa que un entrevistador puede pedirte que escribas en el momento.
Estado y props, hooks (sobre todo useEffect y su array de dependencias), keys en listas, re-renders y memoización, context y obtención de datos. En puestos senior se añaden el profiling de rendimiento, la arquitectura y los Server Components.
Cada vez menos. El código nuevo usa componentes de función y hooks. Aún ayuda reconocer los métodos del ciclo de vida al leer código antiguo, y los error boundaries se siguen escribiendo como clases.
Construye cosas pequeñas desde cero: una lista de tareas, un buscador con una petición con debounce, un modal con gestión del foco. Habla mientras programas y prueba casos límite como listas vacías y errores.
Cada vez más, al menos a nivel de conocerlas: ref como prop, actions con useActionState, useOptimistic, la API use y los Server Components.
¿Flojo con los re-renders? Míralos contados en vivo en
Una librería de JavaScript para construir interfaces de usuario a partir de componentes. Describes cómo debe verse la pantalla con los datos actuales, y React actualiza la página cuando los datos cambian.
Una sintaxis que parece HTML dentro de JavaScript. Un paso de build convierte cada etiqueta en una invocación de función que crea un elemento React, así que puedes usar cualquier expresión de JavaScript entre llaves.
Una función que recibe props y devuelve JSX. Los nombres empiezan por mayúscula para que React pueda distinguirlos de las etiquetas HTML.
Los datos de entrada que un padre pasa a un componente hijo, como los atributos de una etiqueta HTML. Un componente no debe modificar sus propias props; recibe otras nuevas cuando el padre vuelve a renderizarse.
Las props vienen del padre y son de solo lectura dentro del componente. El estado pertenece al propio componente y cambia con el tiempo mediante su setter, lo que provoca un re-render.
Las keys le dicen a React qué elemento es cuál entre renders, para que mantenga el estado y el nodo del DOM correctos con cada elemento cuando la lista se reordena, se filtra o crece. Usa un id estable de tus datos, no el índice del array cuando el orden puede cambiar.
Con JavaScript normal: un if antes del return, el operador ternario dentro del JSX, o && para mostrar algo o nada. Cuidado con && y los números: 0 && <X /> renderiza un 0.
Un envoltorio que agrupa varios elementos sin añadir un nodo al DOM. Escribe <>...</>, o <Fragment key={...}> cuando el grupo necesita una key dentro de una lista.
Pasa una función a una prop en camelCase como onClick. React pasa un evento sintético que se comporta como el evento del navegador. Pasa la función en sí, no el resultado de ejecutarla.
La descripción de la UI como objetos simples que React construye en cada render. React compara la nueva descripción con la anterior y aplica al DOM real solo las diferencias. Esa comparación se conoce como reconciliación.
Da a un componente una porción de estado y una función para actualizarla. Usar el setter programa un re-render con el nuevo valor; la variable del render actual no cambia.
Cuando el siguiente valor depende del anterior, sobre todo con varias actualizaciones en un mismo evento. Cada función de actualización recibe el último valor en cola, mientras que setCount(count + 1) dos veces usa las dos veces el mismo count desfasado.
Para sincronizarse con algo externo a React después del render: una suscripción, un temporizador, un widget que no es de React o una petición de red. El array de dependencias indica cuándo volver a ejecutarlo, y la función devuelta hace la limpieza.
Para calcular valores a partir de props o estado (calcúlalos durante el render) o para reaccionar a un evento del usuario (haz el trabajo en el manejador del evento). Los effects son para sincronizarse con sistemas externos.
Usa los hooks solo en el nivel superior de un componente o de un custom hook, nunca dentro de bucles, condiciones o funciones anidadas, y solo desde funciones de React. React depende de que el orden de las invocaciones sea el mismo en cada render.
Para guardar un valor que sobrevive entre renders sin provocar uno cuando cambia, como un nodo del DOM, el id de un temporizador o un valor anterior. Se lee y se escribe mediante ref.current.
useMemo guarda en caché el resultado de un cálculo; useCallback guarda en caché una función. Ambos devuelven lo mismo hasta que cambia una dependencia, y ambos importan sobre todo al pasar valores a hijos memoizados.
Una forma de leer un valor proporcionado más arriba en el árbol sin pasar props por cada nivel. Todo componente que lee un context se vuelve a renderizar cuando cambia su valor.
Cuando varios valores cambian a la vez o el siguiente estado depende de un tipo de acción, como en un asistente de formulario o un carrito. El reducer reúne todas las transiciones en una sola función fácil de testear.
Una función cuyo nombre empieza por use y que usa otros hooks. Comparte lógica con estado entre componentes; cada componente que lo usa obtiene su propio estado.
Se ejecuta después de que React cambie el DOM pero antes de que el navegador pinte, así que puedes medir el layout y ajustarlo sin un parpadeo visible. Bloquea el pintado, así que úsalo solo para eso.
Para generar un id único que coincide entre el renderizado en servidor y en cliente, para enlazar etiquetas, inputs y descripciones. No está pensado para las keys de las listas.
Mover el estado compartido al padre común más cercano de los componentes que lo necesitan, y luego pasarlo hacia abajo como props junto con funciones para cambiarlo.
React decide si volver a renderizar comparando el valor antiguo con el nuevo. Mutar un objeto o un array en su sitio mantiene la misma referencia, así que React puede saltarse la actualización. Crea una copia nueva en su lugar.
Un input controlado obtiene su valor del estado e informa de los cambios mediante onChange. Un input no controlado guarda su propio valor en el DOM, que lees con una ref o al enviar el formulario.
Un valor que puedes calcular a partir de props o estado existentes, como una lista filtrada. Guardarlo aparte obliga a mantener dos copias sincronizadas; calcularlo durante el render no puede desincronizarse.
Pasar props a través de componentes que no las usan solo para llegar a un hijo profundo. Las soluciones incluyen la composición (pasar children), context, o una librería de estado para datos realmente globales.
Cuando muchos componentes alejados leen y actualizan el mismo estado de cliente y context provoca demasiados re-renders, o cuando necesitas herramientas como devtools y middleware. Los datos del servidor suelen gestionarse mejor con una librería de obtención de datos que los guarda en caché.
En un framework con Server Components, obtén los datos en el servidor. En el cliente, usa una librería de datos o un effect que lance la petición, gestione la carga y los errores, e ignore el resultado si el componente se desmontó o la entrada cambió.
No. Las actualizaciones se ponen en cola y se agrupan; React 18 y posteriores agrupan también las actualizaciones de timeouts y promesas, no solo las de los manejadores de eventos. El nuevo valor aparece en el siguiente render.
Que cambie su estado, que su padre se vuelva a renderizar o que cambie un context que lee. Un re-render no siempre cambia el DOM; React actualiza solo lo que es distinto.
Evita volver a renderizar un componente cuando sus props son superficialmente iguales a las de la vez anterior. Solo compensa cuando el componente se renderiza a menudo con las mismas props y su render no es barato.
Un envoltorio solo para desarrollo que hace comprobaciones extra: renderiza los componentes y ejecuta los effects dos veces para destapar efectos secundarios y limpiezas que faltan. En producción no hace nada.
Graba la interacción en el Profiler de React DevTools sobre un build de producción, busca componentes que se renderizan a menudo o tardan mucho, y arregla la causa: baja el estado, memoiza o virtualiza las listas largas.
Una forma de marcar una actualización como no urgente. React mantiene el input con buena respuesta y puede interrumpir el render lento, e isPending te permite mostrar que hay trabajo en curso.
Te da una copia de un valor que puede ir por detrás durante un renderizado pesado. Al escribir, el input se actualiza al instante mientras la lista costosa se renderiza con el valor diferido.
Virtualízala: renderiza solo las filas visibles con una librería como react-window o TanStack Virtual. Paginar o cargar más al hacer scroll también limita el número de nodos del DOM.
Cargar partes de la app solo cuando hacen falta. React.lazy con un import dinámico y un fallback de Suspense separa un componente en su propio archivo.
Conectar React a un HTML que se renderizó en el servidor, para que el marcado existente se vuelva interactivo sin reconstruirlo. Si el cliente renderiza algo distinto, React informa de un hydration mismatch.
Una herramienta de build que analiza los componentes y añade memoización automáticamente, de modo que buena parte de los useMemo, useCallback y memo escritos a mano dejan de ser necesarios. Espera código que siga las reglas de React.
Construir componentes poniendo otros dentro, a menudo mediante children u otras props. Los componentes React comparten comportamiento mediante composición y hooks, y el equipo de React no ha encontrado ningún caso en el que las jerarquías de herencia ayuden.
Lo que pongas entre las etiquetas de apertura y cierre de un componente. Permite que un componente de layout o envoltorio renderice contenido que no conoce.
Una función que recibe un componente y devuelve uno nuevo con comportamiento extra. Los custom hooks sustituyeron la mayoría de sus usos, porque comparten lógica sin envolver componentes ni renombrar props.
Un componente que captura los errores lanzados al renderizar sus hijos y muestra un fallback en lugar de una página en blanco. Se sigue escribiendo como una clase con getDerivedStateFromError, o con una pequeña librería.
Renderizar los hijos en otro nodo del DOM, como document.body, con createPortal. Se usa para modales y tooltips que deben escapar del overflow o del apilamiento de un padre.
En React 19, los componentes de función aceptan ref como una prop normal. En versiones anteriores, envuelve el hijo en forwardRef. Usa useImperativeHandle para exponer solo ciertos métodos.
Un grupo de componentes que funcionan juntos y comparten estado mediante context, como Tabs con Tabs.List y Tabs.Panel. El usuario organiza las piezas mientras el padre gestiona la lógica.
Componentes que se ejecutan solo en el servidor y envían al navegador su resultado renderizado, no su código. Pueden leer datos directamente; las partes interactivas van en Client Components marcados con "use client".
Marca un archivo como el inicio del código de cliente: ese módulo y lo que importa se empaquetan para el navegador y pueden usar estado, effects y manejadores de eventos.
Funciones async que se ejecutan en el servidor pero se pueden invocar desde el cliente, casi siempre como action de un formulario. Trata cada una como un endpoint público: valida la entrada y comprueba los permisos.
Envuelve una función action y devuelve su último resultado, una action envuelta para pasar a un formulario y un indicador de pendiente. Es la forma de React 19 de mostrar el feedback de un formulario.
Una API de React 19 que lee el valor de una promesa o de un context durante el render. A diferencia de los hooks, se puede usar dentro de condiciones; con una promesa, suspende hasta que el valor está listo.
Muestra al instante el resultado esperado de una acción, como un comentario nuevo, mientras la petición sigue en curso, y luego se ajusta al resultado real cuando vuelve.
Un componente que muestra un fallback mientras algo de su interior no está listo, como código cargado de forma diferida o datos en un framework que lo admite. Con el renderizado en servidor, permite que partes de la página lleguen más tarde por streaming.
Renderízalo con React Testing Library en un test runner como Vitest o Jest, interactúa como lo haría un usuario (clic, escribir) y comprueba lo que se ve, no el estado interno.
Consultas como getByRole("button", { name: "Save" }) encuentran los elementos igual que las tecnologías de asistencia, así que los tests comprueban también que la UI es accesible y resisten los cambios de marcado.
La documentación de React recomienda empezar con un framework como Next.js o React Router para apps completas. Para una app solo de cliente, Vite es una herramienta de build habitual.
Usa elementos HTML semánticos, pon etiqueta a cada input, gestiona el foco en los diálogos, mantén el acceso por teclado en todo lo que se pueda pulsar y prueba con un lector de pantalla y un verificador automático.
Sirve HTML real para cada URL mediante renderizado en servidor, generación estática o prerenderizado, da a cada ruta su propio título y meta description, y lista las URLs en un sitemap.
Keys correctas en las listas, effects con dependencias completas y limpieza, nada de estado que se pueda derivar, marcado accesible, estados de error y de carga, y ningún secreto en el código de cliente.
Todas
Junior
Intermedio
Senior
Tema
Nivel
Buscar
effect, key, memo...
{shown} de {total} preguntas
Empieza gratis · Sin tarjeta de crédito