Las entrevistas de React mezclan especificidades del framework — hooks, rendering, estado — con fundamentos de JavaScript que deciden si realmente entiendes qué está haciendo React. Aquí están las preguntas más comunes con respuestas modelo.
Cada pregunta viene con una respuesta modelo con la que puedes comparar la tuya.
El Virtual DOM es un árbol de elementos en memoria que React compara con el árbol anterior para calcular el conjunto mínimo de operaciones reales del DOM. La reconciliación compara nodo por nodo: un tipo de elemento distinto descarta todo el subárbol, y la prop key le dice a React qué hijos se movieron en vez de cambiaron. El valor no es velocidad cruda — es que describes el estado objetivo y React calcula las mutaciones.
Los hooks deben llamarse en el nivel superior de un componente o un hook personalizado, en el mismo orden en cada render. React guarda el estado de los hooks en un array indexado por orden de llamada, así que un hook condicional desplaza cada índice subsiguiente y un componente empieza a leer el estado de otro hook. Por eso existe la regla del linter — el modo de fallo es silencioso y extremadamente confuso.
useMemo cachea un valor calculado, useCallback cachea una identidad de función, y React.memo se salta el re-render de un componente cuando sus props son superficialmente iguales. Funcionan juntos: memoizar un callback no tiene sentido a menos que el hijo esté envuelto en React.memo. Los tres cuestan memoria y tiempo de comparación, así que aplícalos a problemas medidos en vez de por defecto.
Un closure es una función empaquetada con el scope en el que se creó, así que mantiene acceso a esas variables después de que la función externa retorna. En React explica el estado obsoleto: un efecto o callback captura el valor del estado del render en el que se creó, así que un interval configurado una vez sigue leyendo el valor inicial. Los arreglos son una actualización de estado funcional o agregar la dependencia al efecto.
El call stack corre código síncrono hasta completarse, luego el event loop vacía toda la cola de microtasks — callbacks de promises y queueMicrotask — antes de tomar un macrotask como un timer o un callback de I/O. Por eso una cadena de promises resuelve antes que un setTimeout con delay cero. También explica por qué un loop infinito de microtasks mata de hambre al rendering mientras una cadena de timers no.
Las keys dejan a React emparejar hijos entre renders así mueve nodos del DOM en vez de recrearlos, preservando estado y foco. Usar el índice del array rompe eso cuando la lista se reordena o se inserta un elemento, porque el índice 0 ahora se refiere a un elemento distinto — React reutiliza el nodo del DOM equivocado y el estado del componente termina en la fila equivocada. Un identificador estable de los datos es la key correcta.
Un input controlado toma su valor del estado de React y actualiza a través de onChange, así el estado es la única fuente de verdad y la validación o formato son directos. Un input no controlado mantiene su valor en el DOM y lo lees a través de un ref cuando lo necesitas. Controlado es la elección por defecto; no controlado conviene para inputs de archivo, integraciones con código no-React, y formularios muy grandes donde renderizar por cada tecla cuesta demasiado.
useEffect corre después de que el render se confirma en pantalla, y vuelve a correr cada vez que un valor en el array de dependencias cambia. Devolver una función desde él registra cleanup, que React llama antes de la siguiente corrida y al desmontar — ahí es donde cancelas suscripciones, timers, y requests en vuelo. Omitir el cleanup es la causa usual de fugas de memoria y actualizaciones de estado en componentes desmontados.
Prop drilling es pasar datos a través de componentes que no los usan, puramente para alcanzar un descendiente profundo. Context lo resuelve para valores que son genuinamente globales a un subárbol como tema, idioma, o el usuario actual. Para datos que cambian frecuentemente, una librería de estado o composición de componentes — pasar elementos como children — usualmente es mejor, ya que context re-renderiza a cada consumidor en cada cambio.
=== compara valor y tipo sin conversión, mientras que == convierte los operandos a un tipo común primero, lo que produce resultados como que null == undefined sea true y [] == false sea true. La coerción es esa conversión implícita, y sigue reglas lo bastante complejas como para que poca gente las recuerde bajo presión. Usa === en todos lados; la excepción común es x == null para atrapar tanto null como undefined.
En una entrevista real hablas bajo presión. Cam hace estas mismas preguntas, evalúa cada respuesta y muestra exactamente qué mejorar.
Practicar entrevista de React Frontend →