Preguntas de entrevista de React con respuestas
En React las entrevistas giran alrededor del estado, los efectos y las reglas de los hooks, y de cuándo se vuelve a renderizar un componente. Estas preguntas son de nivel 2, las que tienen trampa, y cada una trae su explicación.
Piensa la respuesta antes de abrirla: la explicación dice por qué fallan las demás opciones. En Streakode tienes 24 preguntas como estas de React, y un simulacro de 10 preguntas en 15 minutos, sin corrección hasta el final, para ver cómo irías en una entrevista de verdad.
12 preguntas de React
Temas: Carga diferida · Efectos · Estado · Listas · React 19 · Refs · Reglas de los hooks · Renderizado condicional · Rendimiento.
1 · Completa el hueco · nivel 2
Completa para cargar Settings solo cuando se muestre, con un spinner mientras llega.
const Settings = ___(() => import("./Settings")); <___ fallback={<Spinner />}> <Settings /></Suspense>- lazy
- Suspense
- dynamic
- Loading
- memo
- Fallback
Ver la respuesta
Respuesta: lazy · Suspense
const Settings = lazy(() => import("./Settings")); <Suspense fallback={<Spinner />}> <Settings /></Suspense>lazy recibe una función que hace el import dinámico y devuelve un componente que se descarga la primera vez que se renderiza. Mientras tanto, Suspense muestra el fallback.
2 · Completa el hueco · nivel 2
Completa para limpiar el intervalo cuando el componente se desmonte.
useEffect(() => { const id = setInterval(tick, 1000); ___ () => ___(id);}, []);- return
- clearInterval
- await
- yield
- cancelInterval
- removeInterval
Ver la respuesta
Respuesta: return · clearInterval
useEffect(() => { const id = setInterval(tick, 1000); return () => clearInterval(id);}, []);La función que devuelve un efecto es su limpieza: React la ejecuta al desmontar el componente y antes de volver a ejecutar el efecto.
3 · Elige la respuesta · nivel 2
En desarrollo y con <StrictMode>, ¿qué se imprime al cargar el componente?
useEffect(() => { console.log("montado"); return () => console.log("limpieza");}, []);- Amontado, limpieza y montado otra vez
- BSolo montado
- CNada hasta que cambie algo
- Dmontado en bucle
Ver la respuesta
Respuesta: A. montado, limpieza y montado otra vez
En desarrollo, StrictMode monta, desmonta y vuelve a montar cada componente para destapar efectos sin limpieza. En producción solo se ejecuta una vez.
4 · Elige la respuesta · nivel 2
Si name valía "Ana", ¿qué imprime y cuántos renders provoca el clic?
function handleClick() { setName("Eva"); setAge(30); console.log(name);}- AAna, y un solo render
- BEva, y un solo render
- CAna, y dos renders
- DEva, y dos renders
Ver la respuesta
Respuesta: A. Ana, y un solo render
Actualizar el estado no cambia la variable del render actual, así que se imprime Ana. React agrupa todas las actualizaciones del mismo evento y hace un único render.
5 · Elige la respuesta · nivel 2
¿Qué número muestra el botón tras un clic?
function Counter() { const [count, setCount] = useState(0); function handleClick() { setCount(count + 1); setCount(count + 1); } return <button onClick={handleClick}>{count}</button>;}- A1
- B2
- C0
- DError por llamar a setState dos veces
Ver la respuesta
Respuesta: A. 1
count vale 0 durante todo el render, así que las dos llamadas piden 0 + 1. Para encadenar actualizaciones hay que usar la forma funcional: setCount((c) => c + 1).
6 · Encuentra el fallo · nivel 2
Al borrar la primera tarea, la casilla marcada salta a la tarea siguiente. ¿Qué línea tiene el fallo?
1function TodoList({ todos }) {2 return (3 <ul>4 {todos.map((todo, index) => (5 <li key={index}>6 <input type="checkbox" /> {todo.text}7 </li>8 ))}9 </ul>10 );11}Ver la respuesta
El fallo está en la línea 5:
<li key={index}>Con el índice como key, al borrar la primera tarea la segunda pasa a tener key 0 y React le da el estado de la casilla que había en esa posición. La key tiene que identificar el dato: key={todo.id}.
7 · Elige la respuesta · nivel 2
¿Qué le pasa a Chat al cambiar a otra pestaña?
<Activity mode={tab === "chat" ? "visible" : "hidden"}> <Chat /></Activity>- ASe oculta pero conserva su estado, y sus efectos se limpian hasta que vuelva a verse
- BSe desmonta y pierde el estado
- CSigue visible debajo de la otra pestaña
- DSe oculta, pero sus efectos siguen activos
Ver la respuesta
Respuesta: A. Se oculta pero conserva su estado, y sus efectos se limpian hasta que vuelva a verse
<Activity>, añadido en React 19.2, oculta a sus hijos sin desmontarlos: conservan el estado y el DOM, pero los efectos se limpian y las actualizaciones pierden prioridad. Al volver a visible, los efectos se recrean.
8 · Elige la respuesta · nivel 2
¿Qué pasa si cambia theme pero no roomId?
function Chat({ roomId, theme }) { const onConnected = useEffectEvent(() => { showToast("Conectado", theme); }); useEffect(() => { const conn = connect(roomId); conn.on("connected", onConnected); return () => conn.close(); }, [roomId]);}- ANo se reconecta, y el aviso usará el theme nuevo
- BSe cierra la conexión y se vuelve a abrir
- CEl aviso usará el theme antiguo
- DUn error: falta theme en las dependencias
Ver la respuesta
Respuesta: A. No se reconecta, y el aviso usará el theme nuevo
useEffectEvent, estable desde React 19.2, crea una función que siempre ve las props y el estado más recientes pero no es una dependencia. El efecto solo reacciona a roomId.
9 · Completa el hueco · nivel 2
Completa para dar el foco al input al pulsar el botón.
const inputRef = ___(null); <input ref={inputRef} /><button onClick={() => inputRef.___.focus()}>Buscar</button>- useRef
- current
- useState
- value
- forwardRef
- node
Ver la respuesta
Respuesta: useRef · current
const inputRef = useRef(null); <input ref={inputRef} /><button onClick={() => inputRef.current.focus()}>Buscar</button>useRef devuelve un objeto que se mantiene entre renders, y React guarda el nodo del DOM en su propiedad current. Cambiar current no provoca un render.
10 · Encuentra el fallo · nivel 2
React lanza un error sobre el orden de los hooks. ¿Qué línea lo provoca?
1function Greeting({ name }) {2 if (!name) {3 const [visible, setVisible] = useState(true);4 }5 return <h1>Hola, {name}</h1>;6}Ver la respuesta
El fallo está en la línea 3:
const [visible, setVisible] = useState(true);Los hooks se llaman siempre en el nivel superior y en el mismo orden en cada render. Nunca dentro de un if, un bucle o una función anidada.
11 · Elige la respuesta · nivel 2
¿Qué aparece dentro del div?
const count = 0;return <div>{count && <p>Tienes mensajes</p>}</div>;- A0
- BNada
- C<p>Tienes mensajes</p>
- Dfalse
Ver la respuesta
Respuesta: A. 0
&& devuelve el primer valor falsy, que aquí es 0. React no pinta false, null ni undefined, pero un número sí. Mejor count > 0 && ... o un ternario.
12 · Elige la respuesta · nivel 2
¿Qué hace este useMemo?
const visible = useMemo(() => filterTodos(todos, query), [todos, query]);- AGuarda el resultado y solo vuelve a calcularlo si cambian todos o query
- BEjecuta filterTodos en segundo plano
- CEvita que el componente se vuelva a renderizar
- DGuarda la función para no crearla en cada render
Ver la respuesta
Respuesta: A. Guarda el resultado y solo vuelve a calcularlo si cambian todos o query
useMemo memoriza un valor calculado entre renders. No evita el render (eso es memo) ni guarda funciones (eso es useCallback). Con React Compiler activado, casi nunca hace falta escribirlo a mano.
