Preguntas de Entrevista React: 50+ Preguntas con Respuestas para 2026

Has pasado meses aprendiendo React.

Puedes crear componentes, gestionar estado y construir interfaces hermosas. Pero cuando el entrevistador pregunta "Explica la arquitectura Fiber de React" o "¿Cómo optimizarías un componente que se re-renderiza 1000 veces?" — tu mente se queda en blanco.

Esta guía te da 50+ preguntas reales de entrevistas React con respuestas de expertos que los entrevistadores realmente hacen en empresas como Meta, Airbnb, Netflix y startups top.

Desarrollador React preparándose para entrevista técnica

Por Qué las Entrevistas de React Son Diferentes

Las entrevistas de React evalúan más que solo conocimiento de sintaxis. Las empresas quieren desarrolladores que entiendan:

Cómo funciona React internamente (reconciliación, Virtual DOM, fiber)
Optimización de rendimiento (cuándo y por qué los componentes se re-renderizan)
Patrones de gestión de estado (local vs global, cuándo usar cada uno)
Resolución de problemas reales (manejo de edge cases, debugging)

Preguntas Fundamentales de React

1. ¿Qué es el Virtual DOM y cómo lo usa React?

Respuesta:

El Virtual DOM es una representación JavaScript ligera del DOM real. Cuando el estado cambia en React:

React crea un nuevo árbol Virtual DOM
Lo compara (diff) con el Virtual DOM anterior
Calcula el conjunto mínimo de cambios necesarios
Agrupa y aplica solo esos cambios al DOM real

Por qué importa: La manipulación directa del DOM es costosa. El Virtual DOM permite a React agrupar actualizaciones y minimizar operaciones del DOM real.

2. Explica la diferencia entre componentes controlados y no controlados

Respuesta:

Componentes controlados: Los datos del formulario son manejados por el estado de React.

function ControlledInput() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

Componentes no controlados: Los datos del formulario son manejados por el DOM mismo.

function UncontrolledInput() {
  const inputRef = useRef();
  const handleSubmit = () => console.log(inputRef.current.value);
  return <input ref={inputRef} />;
}

Cuándo usar cada uno:

Controlados: Cuando necesitas validación, deshabilitado condicional o formateo en tiempo real
No controlados: Formularios simples, inputs de archivo o integración con código no-React

3. ¿Qué son las keys de React y por qué son importantes?

Las keys ayudan a React a identificar qué elementos en una lista han cambiado, se agregaron o eliminaron.

Mala práctica:

// Usar index como key - causa bugs al reordenar
items.map((item, index) => <Item key={index} {...item} />)

Buena práctica:

// Usar identificador único
items.map(item => <Item key={item.id} {...item} />)

Preguntas de React Hooks

4. Explica las reglas de los hooks y por qué existen

Las dos reglas:

Solo llama hooks en el nivel superior (no dentro de loops, condiciones o funciones anidadas)
Solo llama hooks desde funciones React

Por qué existen: React depende del orden de las llamadas de hooks para mantener el estado entre renders.

5. ¿Cuál es la diferencia entre useEffect, useLayoutEffect y useInsertionEffect?

Hook	Cuándo ejecuta	Caso de uso
`useEffect`	Después del paint (async)	Data fetching, suscripciones
`useLayoutEffect`	Antes del paint (sync)	Mediciones DOM, scroll, animaciones
`useInsertionEffect`	Antes de mutaciones DOM	Librerías CSS-in-JS

6. ¿Cómo funciona useCallback y cuándo usarlo?

useCallback devuelve una versión memoizada de un callback que solo cambia cuando las dependencias cambian.

Cuándo usarlo:

Pasando callbacks a componentes optimizados:

const handleClick = useCallback(() => {
  console.log('clicked');
}, []);

return <ExpensiveChild onClick={handleClick} />;

Dependencias de otros hooks

Cuándo NO usarlo: No envuelvas cada función. La memoización tiene overhead.

7. Explica useMemo vs useCallback

// useMemo - memoiza un VALOR
const memoizedValue = useMemo(() => computeExpensive(a, b), [a, b]);

// useCallback - memoiza una FUNCIÓN
const memoizedFn = useCallback(() => doSomething(a, b), [a, b]);

Regla general:

useMemo para cálculos costosos que devuelven valores
useCallback para referencias de funciones pasadas a hijos

Preguntas de Gestión de Estado

8. ¿Cuándo usarías useReducer en lugar de useState?

Usa useReducer cuando:

La lógica de estado es compleja
El siguiente estado depende del anterior
Quieres transiciones de estado predecibles

Regla general: Si tienes múltiples llamadas useState que se actualizan juntas, considera useReducer.

9. Explica React Context y sus implicaciones de rendimiento

Context proporciona una forma de pasar datos a través del árbol de componentes sin prop drilling.

Preocupación de rendimiento: Cuando el valor del context cambia, TODOS los consumidores se re-renderizan.

Soluciones:

Divide contexts por frecuencia de actualización
Memoiza el valor del context
Separa estado y dispatch

Preguntas de Optimización de Rendimiento

10. Un componente se re-renderiza 1000 veces por segundo. ¿Cómo lo depuras y arreglas?

Paso 1: Identifica la causa con React DevTools Profiler

Paso 2: Causas comunes y soluciones:

Nuevas referencias de objeto/array en props:

// MALO - nuevo array cada render
<Child items={data.filter(x => x.active)} />

// BUENO - memoiza el resultado
const activeItems = useMemo(() => data.filter(x => x.active), [data]);
<Child items={activeItems} />

Handlers de función inline:

// MALO
<Child onClick={() => handleClick(id)} />

// BUENO
const handleChildClick = useCallback(() => handleClick(id), [id]);
<Child onClick={handleChildClick} />

11. Explica React.memo y cuándo puede perjudicar el rendimiento

React.memo memoiza la salida renderizada. Solo re-renderiza si los props cambian.

Cuándo ayuda:

Componente se renderiza frecuentemente con mismos props
Renderizado es costoso
Padre re-renderiza frecuentemente pero props del hijo raramente cambian

Cuándo perjudica:

Props siempre cambian de todas formas
Componente es barato de renderizar
Props son objetos complejos

Preguntas Avanzadas de React

12. Explica la arquitectura React Fiber

Fiber es el motor de reconciliación de React (introducido en React 16). Permite:

Renderizado incremental: Divide el trabajo en chunks
Priorización: Pausa, aborta o reutiliza trabajo según prioridad
Concurrencia: Trabaja en múltiples árboles simultáneamente

Dos fases:

Fase de render (interrumpible): Construye el árbol fiber, calcula cambios
Fase de commit (no interrumpible): Aplica cambios al DOM

13. ¿Qué son los React Server Components?

Aspecto	SSR	Server Components
Dónde renderiza	Servidor, luego hidrata en cliente	Solo servidor, nunca llega al cliente
JavaScript enviado	Código completo del componente	Solo salida serializada
Interactividad	Completa después de hidratación	Debe usar Client Components

Desafíos de Código

14. Implementa un hook useDebounce

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => clearTimeout(timer);
  }, [value, delay]);

  return debouncedValue;
}

Practica con IA

Leer estas preguntas es el paso uno. Practicar en voz alta es cómo realmente te sientes cómodo explicándolas.

El modo PRÁCTICA de Interview Whisper te permite:

Recibir preguntas reales de entrevista React por un entrevistador IA
Practicar explicando conceptos en voz alta
Recibir feedback instantáneo sobre claridad y completitud

No entres a tu entrevista de React esperando recordar estas respuestas. Practica hasta que explicar la arquitectura Fiber y useCallback se sienta natural.

Empieza a Practicar Preguntas de Entrevista React con IA