25 preguntas populares para una entrevista de React

Vale, imagínate: entras en una llamada de Zoom, ves tres caras en la cámara y un cuadrado negro con las palabras «Senior React Developer». El corazón ya está en los talones, las manos están húmedas y en la cabeza solo da vueltas «por favor, no preguntes sobre la reconciliación».

Spoiler: Pero después de este artículo, estarás listo como Tony Stark antes de la batalla final.

🔥 Conceptos básicos (que por alguna razón todo el mundo olvida)

1. ¿Cuál es la diferencia entre Real DOM y Virtual DOM?

Dificultad: Más fácil que entender por qué Array.sort() muta una matriz

Respuesta corta: Real DOM es lo que realmente se muestra en el navegador. Pesado, lento, como despertarse por la mañana. El DOM virtual es una copia de JavaScript, ligera y rápida. React los compara a través de diffing y actualiza solo lo que ha cambiado.

Qué decir en la entrevista: «Virtual DOM permite a React parchear actualizaciones y minimizar operaciones costosas con Real DOM utilizando un algoritmo de reconciliación. Es como usar Git: primero se confirma localmente, luego se envían todos los cambios a la vez».

2. ¿Qué es JSX y por qué escribimos HTML en JavaScript?

Dificultad: Cómo explicarle a la abuela qué es un meme

JSX es azúcar sintáctico sobre React.createElement(). Sin JSX, tu código se vería como JSON del infierno.

// Con JSX (bonito, estético)
<div className="hot">
  <h1>Привет, мир!</h1>
</div>

// Sin JSX (bienvenido a 2013)
React.createElement('div', {className: 'hot'},
  React.createElement('h1', null, 'Hello, world!')
)

3. Componentes funcionales vs. componentes de clase: ¿todavía tienen sentido las clases?

Dificultad: ¿Cómo discutir qué es mejor, la pizza o el shawarma?

Los componentes funcionales con ganchos ganaron. Las clases se quedaron como dinosaurios en proyectos heredados. Pero en la entrevista pueden preguntar sobre componentDidMount — prepárate.

4. Explica useState, pero de forma interesante

const [coffee, setCoffee] = useState('no 😭');

// A través de un par de líneas de código...
setCoffee('Yes! ☕');

Es como la caja del gato de Schrödinger, pero siempre sabes lo que hay dentro.

5. useEffect: ¿por qué necesitas una matriz de dependencias?

Complejidad: comprender por qué su efecto se activa 1000 veces

Un clásico del género: «Tengo un ciclo infinito en useEffect, ¡ayuda!»

// ❌ Infierno sin fin
useEffect(() => {
  setCount(count + 1); // Otro billete al infinito
});

// ✅ Caos controlado
useEffect(() => {
  fetchData();
}, []); // Matriz vacía = una vez durante el montaje

Regla: Si usas una variable dentro de useEffect, añádela a las dependencias. ESLint no se equivoca.

6. useMemo vs useCallback: ¿cuál es la diferencia?

Dilema: ¿Cómo elegir entre dos camisetas idénticas?

• useMemo memoriza valor (resultado de los cálculos)

• useCallback memoriza función

const expensiveValue = useMemo(() => {
  return calculatePi(1000000); // calculamos una vez
}, []);

const handleClick = useCallback(() => {
  doSomething(id);
}, [id]); // la función se recrea solo cuando se cambia el id

7. useRef: no solo para acceder a DOM

Es como un bolsillo en una chaqueta donde puedes poner cualquier cosa y no provocará un re-render.

const renderCount = useRef(0);

useEffect(() => {
  renderCount.current += 1; // ¡No provocará un re-render!
});

8. ¿Es posible llamar a los ganchos condicionalmente?

NO. NUNCA. OLVIDA.

// ❌ Esto puede provocar errores
if (condition) {
  useState(0); // React: "Am I a joke to you?"
}

// ✅ Correcto
const [state, setState] = useState(0);
if (condition) {
  // usamos state aquí
}

🎭 Conceptos avanzados (donde empieza el dolor)

9. ¿Qué es la reconciliación y cómo funciona Fiber?

Complejidad: Explicar la física cuántica a través de memes

La reconciliación es el proceso de comparación de Virtual DOM. Fiber es una nueva implementación de este proceso con React 16+, que permite interrumpir y reanudar el trabajo (como guardar en un juego).

10. Claves en listas: ¿por qué index es malo?

// ❌ El entrevistador niega con la cabeza
{items.map((item, index) => 
  <div key={index}>{item}</div>
)}

// ✅ El entrevistador asiente con respeto
{items.map(item => 
  <div key={item.id}>{item}</div>
)}

El uso de un índice como clave puede provocar errores al reorganizar los elementos. React pensará que son los mismos elementos, pero con nuevos datos.

11. Context API: ¿cuándo usarlo y cuándo recurrir a Redux?

Context para cosas simples (tema, idioma, usuario). Si tienes una lógica de estado compleja, Redux o Zustand te ayudarán.

12. Componentes de orden superior (HOC): ¿están vivos?

Técnicamente sí, pero sus ganchos prácticamente los enterraron. Es necesario saber, pero no usar.

// Oldschool, pero pueden preguntar
const withAuth = (Component) => {
  return (props) => {
    const isAuth = useAuth();
    return isAuth ? <Component {...props} /> : <Login />;
  };
};

13. Render Props: ¿qué es y para qué sirve?

Un patrón que también casi se extinguió con la llegada de los ganchos.

<DataProvider render={data => (
  <h1>Привет, {data.name}</h1>
)} />

⚡ Optimización (para que todo vaya rápido)

14. React.memo: ¿cuándo aplicarlo?

Memorización de componentes. Evita re-renders innecesarios.

const ExpensiveComponent = React.memo(({ data }) => {
  // se renderiza solo si los datos han cambiado
  return <div>{/* тяжёлые вычисления */}</div>;
});

15. Lazy loading y React.Suspense

const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

<Suspense fallback={<Spinner />}>
  <HeavyComponent />
</Suspense>

El usuario está contento, el paquete es más pequeño, tú eres un as.

16. Code splitting: ¿por qué es importante?

Nadie quiere cargar 5 MB de JavaScript la primera vez que visita un sitio web. Divide y vencerás.

🔄 Estado y gestión de datos

17. Componentes controlados vs. no controlados

Controlled: React controla el estado de la entrada (a través de useState)
Uncontrolled: DOM gestiona el valor por sí mismo (a través de ref)

// Controlado (camino correcto)
const [value, setValue] = useState('');
<input value={value} onChange={e => setValue(e.target.value)} />

// Sin control (para perezosos)
const inputRef = useRef();
<input ref={inputRef} />

18. Perforación de propiedades: problema y soluciones

Cuando lanzas propiedades a través de 5 niveles de componentes. Soluciones: Context API, Redux, composition.

19. ¿Qué es Lifting State Up?

Elevar el estado a un nivel superior para que varios componentes puedan usarlo.

20. Redux vs MobX vs Zustand: ¿cuál elegir?

• Redux: si te gusta el boilerplate y la arquitectura estricta

• MobX: si te gusta la magia y la reactividad

• Zustand: si te gusta la sencillez y el minimalismo

En 2025, Zustand gana popularidad en nuevos proyectos.

🧪 Pruebas

21. React Testing Library vs Enzyme

Enzyme está desactualizado. Utilice React Testing Library.

import { render, screen } from '@testing-library/react';

test('button exists', () => {
  render(<Button />);
  expect(screen.getByRole('button')).toBeInTheDocument();
});

22. ¿Qué son las pruebas de instantáneas?

Guarda una "instantánea" del componente y la compara cuando hay cambios. Es útil, pero no lo sobreestimes.

🚀 React 18+ y el futuro

23. Renderización concurrente: ¿qué ha cambiado?

React puede interrumpir el renderizado y reanudarlo. No más congelaciones de la interfaz.

24. Automatic Batching: ¿por qué lo necesito?

React 18 parchea todas las actualizaciones de estado automáticamente, incluso en promesas y tiempos de espera.

25. useTransition y useDeferredValue: ¿para qué?

Permite marcar las actualizaciones como no urgentes, dando prioridad a las más importantes.

const [isPending, startTransition] = useTransition();

startTransition(() => {
  setSearchQuery(input); // No bloquea la entrada del usuario
});

🎓 ¿Listo para la entrevista? ¿Y para la práctica real?

Aprender la teoría es como leer las instrucciones de IKEA. La verdadera habilidad viene cuando montas los muebles (escribes el código) con tus propias manos.

Para eso hemos creado Kodik es una aplicación donde no solo puedes leer sobre React, sino también practicar de inmediato. Cada lección es un miniproyecto que se puede hacer directamente en el navegador. Desde useState hasta aplicaciones listas para producción.

La clave es que la teoría se consolida inmediatamente con la práctica. No es necesario cambiar entre pestañas, buscar dónde ejecutar el código, configurar el entorno. Abre Kodik y empieza a codificar.

Y también tenemos Canal de Telegram, donde todos los días se publican publicaciones útiles: análisis de conceptos, memes sobre programación, vacantes actuales y trucos para la vida. Es como un entrenamiento diario del cerebro: pasas la cinta y te ejercitas.

Ideal para repetir el material en el metro, antes de acostarse o durante la hora del almuerzo. ¡La programación debe ser cómoda!

Recuerda: en una entrevista, es importante no solo saber las respuestas, sino también poder razonar. Si no lo sabes, dilo, pero muestra cómo buscarías la respuesta. Los entrevistadores valoran la honestidad y la capacidad de aprender más que saberse todas las API de memoria.

¡Buena suerte en la entrevista! Que tus componentes se rendericen siempre de forma eficiente y que los errores se encuentren antes de la producción 🚀