Domina tu entrevista técnica de React con esta guía completa 2026. 50+ preguntas reales, respuestas detalladas, ejemplos de código y tips de expertos. Junior a Senior.
Jesús Blanco
Autor
¿Tienes una entrevista de React próximamente y no sabes por dónde empezar? ¿Te preocupa que te pregunten algo que no sabes? No estás solo. Según datos de LinkedIn, React es la habilidad más demandada en desarrollo frontend en 2026, con más de 127,000 vacantes activas solo en América Latina.
La realidad es que las entrevistas técnicas de React pueden ser intimidantes, pero con la preparación correcta, puedes convertir esa ansiedad en confianza. En esta guía, te voy a mostrar exactamente qué esperar, qué estudiar y cómo responder las preguntas más comunes que hacen los entrevistadores (incluidas las preguntas trampa que casi nadie te cuenta).
He compilado más de 50 preguntas reales de entrevistas de React, desde nivel junior hasta senior, con respuestas detalladas y código de ejemplo. Esta guía está actualizada para 2026, incluyendo React 19, Server Components y las últimas tendencias del ecosistema.
Lo que aprenderás en esta guía:
A diferencia de otros frameworks, React tiene un ecosistema enorme. Los entrevistadores no solo evalúan si sabes React, sino también:
Un entrevistador experimentado puede detectar en 5 minutos si realmente has trabajado con React o solo leíste la documentación. La diferencia está en los detalles.
Antes de entrar en las preguntas, necesitas entender cómo funciona el proceso:
Con quién: Recruiter o HR
Qué evalúan: Fit cultural, expectativas salariales, disponibilidad, inglés (si aplica)
Preguntas comunes:
Tip clave: Aquí no te evalúan técnicamente a fondo. Sé honesto, muestra entusiasmo y prepara 2-3 proyectos que puedas explicar claramente.
Con quién: Developer, Tech Lead o Senior Engineer
Qué evalúan: Conocimiento técnico, experiencia real, forma de pensar
Formato: Preguntas teóricas + algunas prácticas en whiteboard/papel
Este es el momento crucial. Aquí es donde la mayoría de candidatos fallan.
Con quién: Equipo técnico observando (a veces en vivo, a veces asíncrono)
Qué evalúan: Cómo escribes código real, debugging skills, comunicación
Formato:
Con quién: CTO, Engineering Manager
Qué evalúan: Soft skills, visión técnica, fit con el equipo
Preguntas comunes:
Estas preguntas aparecen en el 85% de las entrevistas React. Si las dominas, ya tienes medio camino ganado.
Respuesta básica (junior):
"React es una biblioteca de JavaScript creada por Facebook para construir interfaces de usuario. Se usa porque permite crear aplicaciones web rápidas y escalables usando componentes reutilizables."
Respuesta profesional (mid-senior):
"React es una biblioteca declarativa de UI basada en componentes que resuelve el problema de mantener sincronizada la interfaz con el estado de la aplicación. Su principal ventaja es el Virtual DOM, que optimiza las actualizaciones del DOM real haciendo diff calculations en memoria. Esto resulta en mejor performance, especialmente en aplicaciones complejas con muchas actualizaciones de estado.
Además, su arquitectura component-based promueve la reutilización de código y hace que las aplicaciones sean más fáciles de mantener y testear. El unidirectional data flow también simplifica el debugging al hacer el flujo de datos más predecible."
Por qué esta respuesta funciona:
Respuesta completa:
// Componente de Clase (legacy)
class UserProfile extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentDidMount() {
console.log('Component mounted');
}
render() {
return {this.props.name};
}
}
// Componente Funcional (moderno)
function UserProfile({ name }) {
const [count, setCount] = useState(0);
useEffect(() => {
console.log('Component mounted');
}, []);
return {name};
}
Explicación:
"Los componentes funcionales son la forma moderna recomendada de escribir componentes en React. Desde React 16.8 con la introducción de Hooks, los funcionales pueden hacer todo lo que hacían los de clase pero con menos código y más legibilidad.
Ventajas de funcionales:
thisCuándo usar cada uno:
Tip de entrevistador: Si mencionas error boundaries, probablemente te pregunten qué son. Prepárate para explicarlo.
Respuesta estructurada:
"Los Hooks son funciones especiales que permiten usar estado y otras características de React en componentes funcionales. Los principales son:
useState - Manejo de estado local:
const [count, setCount] = useState(0);
// count: valor actual
// setCount: función para actualizarlo
useEffect - Side effects y lifecycle:
useEffect(() => {
// Se ejecuta después del render
document.title = `Clicks: ${count}`;
// Cleanup (opcional)
return () => {
document.title = 'App';
};
}, [count]); // Dependencies array
useContext - Consumir contexto sin props drilling:
const theme = useContext(ThemeContext);
useCallback - Memoizar funciones:
const handleClick = useCallback(() => {
console.log(count);
}, [count]);
useMemo - Memoizar valores computados:
const expensiveValue = useMemo(() => {
return computeExpensiveValue(a, b);
}, [a, b]);
useRef - Referencias a elementos DOM o valores mutables:
const inputRef = useRef(null);
inputRef.current.focus();
```"
**Pregunta follow-up común:** "¿Cuál es la diferencia entre useCallback y useMemo?"
**Respuesta:**
"useCallback memoiza la función misma (devuelve la misma instancia si las dependencias no cambian), mientras que useMemo memoiza el resultado de ejecutar una función.
Ejemplo:
```javascript
// useCallback: memoiza la función
const handleClick = useCallback(() => {
doSomething(a, b);
}, [a, b]);
// useMemo: memoiza el resultado
const result = useMemo(() => {
return doSomething(a, b);
}, [a, b]);
Usa useCallback cuando pasas funciones a componentes hijos optimizados con React.memo, y useMemo para cálculos costosos."
Respuesta técnica pero accesible:
"El Virtual DOM es una representación ligera en memoria del DOM real. Es básicamente un árbol de objetos JavaScript que representa la estructura de la UI.
Cómo funciona:
Ejemplo visual:
// Estado inicial
Contador: 0
Incrementar
// Usuario hace click
// React NO actualiza todo el div, solo el contenido del
// Estado nuevo
Contador: 1 // ← Solo esto se actualiza en DOM real
Incrementar
Ventaja:
Manipular el DOM real es lento (repaint, reflow). El Virtual DOM permite batching de updates y minimiza las operaciones costosas de DOM.
Dato técnico:
React Fiber (desde React 16) mejoró esto permitiendo interrumpir y priorizar updates, haciendo la app más responsive."
Respuesta con tabla comparativa:
| Props | State |
|---|---|
| Pasan datos de padre a hijo | Datos internos del componente |
| Son inmutables (read-only) | Son mutables (se actualizan) |
| No pueden ser modificados por el hijo | El componente los controla |
| Se usan para configurar componentes | Se usan para datos que cambian |
Ejemplo práctico:
// Props: pasan de padre a hijo
function Parent() {
return ;
}
function Child({ name, age }) {
// name y age son props (no se pueden modificar aquí)
return {name} tiene {age} años;
}
// State: interno del componente
function Counter() {
const [count, setCount] = useState(0);
return (
Count: {count}
<button onClick={() => setCount(count + 1)}>+
);
}
Cuándo usar cada uno:
Respuesta con ejemplo de error común:
"Las keys son identificadores únicos que ayudan a React a identificar qué elementos de una lista han cambiado, agregado o eliminado.
Por qué son críticas:
Sin keys, React no puede optimizar correctamente el renderizado de listas. Puede causar bugs sutiles y problemas de performance.
Ejemplo INCORRECTO:
// ❌ MAL: Usando index como key
{users.map((user, index) => (
))}
// Problema: Si reordenas o eliminas items,
// React confunde qué componente es cuál
Ejemplo CORRECTO:
// ✅ BUENO: Usando ID único
{users.map((user) => (
))}
// Cada elemento tiene identidad estable
Caso real donde importa:
function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: 'Comprar leche', done: false },
{ id: 2, text: 'Estudiar React', done: true },
]);
// Si usas index y eliminas el primer todo,
// React pensará que modificaste el texto del segundo
// en lugar de eliminar el primero
return (
{todos.map(todo => (
<input
type="checkbox"
checked={todo.done}
// Este estado se mantiene correcto con key={todo.id}
/>
{todo.text}
))}
);
}
Regla de oro: Usa un ID único y estable. Si no tienes IDs, genera uno en la carga inicial (con uuid o similar), no uses índices."
Esta es probablemente la pregunta más importante y donde más candidatos fallan.
Respuesta completa:
"useEffect es un hook para manejar side effects (efectos secundarios) en componentes funcionales. Es el equivalente a componentDidMount, componentDidUpdate y componentWillUnmount combinados.
Sintaxis básica:
useEffect(() => {
// Effect code
return () => {
// Cleanup (opcional)
};
}, [dependencies]);
Tres casos de uso:
1. Sin dependencies array (ejecuta en cada render):
useEffect(() => {
console.log('Render completo');
});
// ⚠️ Casi nunca querrás esto
2. Con array vacío (solo al montar):
useEffect(() => {
// Equivalente a componentDidMount
fetchUserData();
}, []); // Solo se ejecuta una vez
3. Con dependencies (cuando cambian):
useEffect(() => {
document.title = `Contador: ${count}`;
}, [count]); // Solo cuando count cambia
Cleanup function:
useEffect(() => {
const subscription = apiClient.subscribe(userId);
// Cleanup ejecuta antes del siguiente effect
// y cuando el componente se desmonta
return () => {
subscription.unsubscribe();
};
}, [userId]);
Error común #1: Dependencias faltantes
// ❌ MAL
useEffect(() => {
fetch(`/api/user/${userId}`);
}, []); // Falta userId en dependencies
// ✅ BIEN
useEffect(() => {
fetch(`/api/user/${userId}`);
}, [userId]);
Error común #2: Estado desactualizado
// ❌ MAL
useEffect(() => {
const interval = setInterval(() => {
setCount(count + 1); // count siempre será el inicial
}, 1000);
return () => clearInterval(interval);
}, []);
// ✅ BIEN
useEffect(() => {
const interval = setInterval(() => {
setCount(prev => prev + 1); // Usa función actualizadora
}, 1000);
return () => clearInterval(interval);
}, []);
```"
**Pregunta follow-up:** "¿Qué pasa si olvidas una dependencia?"
**Respuesta:** "React mostrará una advertencia en desarrollo (con eslint-plugin-react-hooks). El efecto usará valores stale (desactualizados), causando bugs sutiles. Por eso siempre debes confiar en las advertencias del linter."
### 8. ¿Cómo optimizarías el performance de una aplicación React?
Esta pregunta separa juniors de seniors. Necesitas dar respuestas concretas con ejemplos.
**Respuesta estructurada:**
"Hay múltiples niveles de optimización en React:
**1. Component-level optimizations**
**React.memo()** - Evita re-renders innecesarios:
```javascript
const ExpensiveComponent = React.memo(({ data }) => {
return {/* render data */};
});
// Solo re-renderiza si props cambian
useCallback/useMemo - Evita recrear funciones/valores:
// Sin optimization
function Parent() {
const handleClick = () => {}; // Nueva función en cada render
return ;
}
// Con optimization
function Parent() {
const handleClick = useCallback(() => {}, []);
return ;
}
2. Code Splitting
// Lazy loading de componentes
const HeavyComponent = lazy(() => import('./HeavyComponent'));
function App() {
return (
}>
);
}
3. Virtualization para listas largas
import { FixedSizeList } from 'react-window';
function BigList({ items }) {
return (
{({ index, style }) => (
{items[index]}
)}
);
}
// Renderiza solo items visibles, no 10,000 items
4. Debouncing inputs pesados
function SearchBox() {
const [query, setQuery] = useState('');
const debouncedSearch = useMemo(
() => debounce((value) => {
fetch(`/api/search?q=${value}`);
}, 300),
[]
);
return (
<input
value={query}
onChange={(e) => {
setQuery(e.target.value);
debouncedSearch(e.target.value);
}}
/>
);
}
5. Measuring performance
import { Profiler } from 'react';
Tools que debes mencionar:
Respuesta con ejemplo práctico:
"Context API es una forma de compartir datos entre componentes sin prop drilling (pasar props manualmente por cada nivel).
Cuándo usarlo:
Cuándo NO usarlo:
Implementación completa:
// 1. Crear contexto
const ThemeContext = createContext();
// 2. Crear provider
function ThemeProvider({ children }) {
const [theme, setTheme] = useState('light');
const toggleTheme = () => {
setTheme(prev => prev === 'light' ? 'dark' : 'light');
};
const value = {
theme,
toggleTheme
};
return (
{children}
);
}
// 3. Crear custom hook (best practice)
function useTheme() {
const context = useContext(ThemeContext);
if (!context) {
throw new Error('useTheme must be used within ThemeProvider');
}
return context;
}
// 4. Usar en componentes
function Button() {
const { theme, toggleTheme } = useTheme();
return (
<button
className={theme === 'dark' ? 'btn-dark' : 'btn-light'}
onClick={toggleTheme}
>
Toggle theme
);
}
// 5. Wrap app
function App() {
return (
);
}
Performance tip:
// ❌ MAL: Todo re-renderiza cuando value cambia
// ✅ MEJOR: Memoiza el value
const value = useMemo(() => ({ theme, toggleTheme }), [theme]);
```"
### 10. ¿Cuál es la diferencia entre componentes controlados y no controlados?
**Respuesta con pros/cons:**
"La diferencia está en quién controla el valor del input.
**Componente Controlado:**
React controla el valor via state.
```javascript
function ControlledForm() {
const [email, setEmail] = useState('');
return (
<input
type="email"
value={email} // React controla el valor
onChange={(e) => setEmail(e.target.value)}
/>
);
}
Pros:
Cons:
Componente No Controlado:
El DOM controla el valor, accedes con refs.
function UncontrolledForm() {
const emailRef = useRef();
const handleSubmit = () => {
console.log(emailRef.current.value);
};
return (
<input
type="email"
ref={emailRef} // Acceso directo al DOM
defaultValue="default@email.com"
/>
);
}
Pros:
Cons:
Cuándo usar cada uno:
Controlado:
No controlado:
Estas preguntas son más difíciles y evalúan experiencia real.
"useEffect tiene un ciclo complejo que muchos malinterpretan:
Timing de ejecución:
Visualización:
function Component() {
const [count, setCount] = useState(0);
console.log('1. Render');
useLayoutEffect(() => {
console.log('2. useLayoutEffect (sync, antes de paint)');
});
useEffect(() => {
console.log('3. useEffect (async, después de paint)');
return () => {
console.log('4. Cleanup del effect anterior');
};
});
return {count};
}
// Orden de ejecución:
// 1. Render
// 2. useLayoutEffect
// [BROWSER PAINT]
// 3. useEffect
// [user clicks]
// 4. Cleanup
// 1. Render
// 2. useLayoutEffect
// [BROWSER PAINT]
// 3. useEffect
Truco mental:
useEffect = "después de que el usuario vea los cambios"
useLayoutEffect = "antes de que el usuario vea los cambios"
Cuándo importa:
Animaciones, mediciones de DOM, evitar flickering."
"Reconciliation es el algoritmo que React usa para calcular qué cambió entre renders.
Proceso:
A) Diferentes tipos de elementos:
// Antes
// Después
// React: "div cambió a span, destruyo Counter completo"
B) Keys en listas:
// Sin key
A
B
// Añades C al inicio
C // React piensa que A cambió a C
A // React piensa que B cambió a A
B // React piensa que se añadió B
// Con key
A
B
// React entiende que se INSERTÓ C
C) Recursión en children:
React compara children uno por uno.
3. Commit phase:
Aplica cambios calculados al DOM real.
React Fiber mejoras:
Ejemplo real y útil:
// Hook para manejar async data fetching
function useFetch(url) {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
useEffect(() => {
let isMounted = true; // Evita memory leak
setLoading(true);
fetch(url)
.then(res => res.json())
.then(data => {
if (isMounted) {
setData(data);
setLoading(false);
}
})
.catch(err => {
if (isMounted) {
setError(err);
setLoading(false);
}
});
return () => {
isMounted = false;
};
}, [url]);
return { data, loading, error };
}
// Uso
function UserProfile({ userId }) {
const { data, loading, error } = useFetch(`/api/users/${userId}`);
if (loading) return ;
if (error) return ;
return {data.name};
}
Otro ejemplo: useLocalStorage
function useLocalStorage(key, initialValue) {
const [storedValue, setStoredValue] = useState(() => {
try {
const item = window.localStorage.getItem(key);
return item ? JSON.parse(item) : initialValue;
} catch {
return initialValue;
}
});
const setValue = (value) => {
try {
const valueToStore = value instanceof Function
? value(storedValue)
: value;
setStoredValue(valueToStore);
window.localStorage.setItem(key, JSON.stringify(valueToStore));
} catch (error) {
console.error(error);
}
};
return [storedValue, setValue];
}
// Uso
function Settings() {
const [theme, setTheme] = useLocalStorage('theme', 'light');
return ;
}
Cuándo crear custom hooks:
Reglas:
Estos son los ejercicios más comunes que te pedirán implementar en vivo.
function TodoApp() {
const [todos, setTodos] = useLocalStorage('todos', []);
const [input, setInput] = useState('');
const addTodo = () => {
if (!input.trim()) return;
setTodos([...todos, {
id: Date.now(),
text: input,
completed: false
}]);
setInput('');
};
const toggleTodo = (id) => {
setTodos(todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
));
};
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
<input
value={input}
onChange={(e) => setInput(e.target.value)}
onKeyPress={(e) => e.key === 'Enter' && addTodo()}
/>
Add
{todos.map(todo => (
<input
type="checkbox"
checked={todo.completed}
onChange={() => toggleTodo(todo.id)}
/>
{todo.text}
<button onClick={() => deleteTodo(todo.id)}>Delete
))}
);
}
function SearchBox() {
const [query, setQuery] = useState('');
const [results, setResults] = useState([]);
const [loading, setLoading] = useState(false);
// Debounce the search
useEffect(() => {
if (!query.trim()) {
setResults([]);
return;
}
setLoading(true);
const timeout = setTimeout(() => {
fetch(`/api/search?q=${query}`)
.then(res => res.json())
.then(data => {
setResults(data);
setLoading(false);
});
}, 300);
return () => clearTimeout(timeout);
}, [query]);
return (
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Search..."
/>
{loading && }
{results.map(item => (
{item.title}
))}
);
}
const initialState = { count: 0 };
function reducer(state, action) {
switch (action.type) {
case 'increment':
return { count: state.count + 1 };
case 'decrement':
return { count: state.count - 1 };
case 'reset':
return initialState;
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
Count: {state.count}
<button onClick={() => dispatch({ type: 'increment' })}>+
<button onClick={() => dispatch({ type: 'decrement' })}>-
<button onClick={() => dispatch({ type: 'reset' })}>Reset
);
}
❌ "Uso useCallback porque la documentación lo dice"
✅ "Uso useCallback para evitar que funciones se recreen en cada render, lo cual causaría re-renders innecesarios en componentes hijos memoizados"
// ❌ MAL
function BadComponent() {
const [data, setData] = useState(null);
useEffect(() => {
fetch('/api/data').then(res => res.json()).then(setData);
}); // Falta dependency array - loop infinito
return {data?.value};
}
// ✅ BIEN
function GoodComponent() {
const [data, setData] = useState(null);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);
useEffect(() => {
let isMounted = true;
setLoading(true);
fetch('/api/data')
.then(res => res.json())
.then(data => {
if (isMounted) {
setData(data);
setLoading(false);
}
})
.catch(err => {
if (isMounted) {
setError(err);
setLoading(false);
}
});
return () => { isMounted = false; };
}, []); // Dependency array correcto
if (loading) return ;
if (error) return ;
return {data?.value};
}
// ❌ Olvida casos límite
function UserList({ users }) {
return (
{users.map(user => {user.name})}
);
}
// ✅ Maneja todos los casos
function UserList({ users }) {
if (!users) return null;
if (users.length === 0) return ;
return (
{users.map(user => (
{user.name || 'Unknown user'}
))}
);
}
Si no sabes testing de React, estás descalificado para posiciones mid+.
import { render, screen, fireEvent } from '@testing-library/react';
test('counter increments when button clicked', () => {
render();
const button = screen.getByText('+');
const count = screen.getByText(/count:/i);
expect(count).toHaveTextContent('Count: 0');
fireEvent.click(button);
expect(count).toHaveTextContent('Count: 1');
});
En 2026, TypeScript es casi obligatorio.
// Tipos básicos que debes dominar
interface User {
id: number;
name: string;
email: string;
}
interface UserCardProps {
user: User;
onDelete: (id: number) => void;
}
const UserCard: React.FC = ({ user, onDelete }) => {
return (
{user.name}
<button onClick={() => onDelete(user.id)}>Delete
);
};
Situation - Task - Action - Result
Ejemplo:
Pregunta: "Cuéntame de un bug difícil que resolviste"
Respuesta:
"En mi último proyecto (S), teníamos memory leaks en un dashboard que causaban que el navegador se colgara después de 10 minutos (T). Usé React DevTools Profiler y descubrí que teníamos subscriptions de websocket sin cleanup en useEffect (A). Implementé el cleanup function y el problema se resolvió, reduciendo el uso de memoria en 60% (R)."
NUNCA digas simplemente "No sé". En su lugar:
❌ "No sé qué es Suspense"
✅ "No he trabajado directamente con Suspense, pero entiendo que es para manejar async rendering y code splitting. ¿Podrías explicarme un caso de uso específico donde sería crítico?"
Esto demuestra:
// ❌ Silencio mientras codeas
// ✅ Narrar tu proceso
"Ok, necesito un componente que fetche data. Primero voy a
usar useState para data, loading y error. Luego useEffect con
cleanup para evitar memory leaks si el componente se desmonta
antes de que termine el fetch..."
Cuando te den un challenge:
"Antes de empezar, tengo algunas preguntas:
Esto demuestra profesionalismo y pensamiento estratégico.
No estudies solo teoría. Construye:
24 horas antes:
1 hora antes:
Durante la entrevista:
Las entrevistas técnicas no miden si eres un buen desarrollador. Miden si puedes demostrar que eres un buen desarrollador en 60 minutos bajo presión.
La realidad:
Lo que realmente importa:
Si repasaste esta guía, hiciste los ejercicios de código y construiste algunos proyectos, estás más preparado que el 80% de candidatos.
Tu próximo paso: Agenda una entrevista esta semana. No esperes a sentirte "100% listo". Nunca lo estarás. La práctica real es la mejor preparación.
¿Necesitas ayuda técnica con React para tu proyecto o equipo? En Fencode desarrollamos aplicaciones React profesionales y podemos ayudarte a llevar tu idea a producción. Agenda una consulta gratuita aquí.
¿Cuánto tiempo debo estudiar antes de una entrevista React?
Depende de tu nivel. Junior: 2-3 semanas full-time. Mid: 1 semana de repaso. Senior: 2-3 días repasando temas específicos.
¿Es necesario saber Redux en 2026?
No es obligatorio, pero ayuda mucho. Context API puede ser suficiente para junior, pero mid+ debería conocer al menos los conceptos de Redux o alguna alternativa moderna (Zustand, Jotai).
¿Me pueden preguntar sobre Next.js en una entrevista React?
Sí, muy probablemente. Next.js está muy ligado a React. Conoce al menos los conceptos básicos de SSR/SSG.
¿Qué hago si me bloqueo en una pregunta de código?
Piensa en voz alta, explica tu proceso aunque no tengas la solución. Los entrevistadores valoran el approach tanto como la respuesta.
¿Puedo usar Google durante un coding challenge?
Depende de la empresa. En live coding, normalmente no. En take-home, usualmente sí. SIEMPRE pregunta antes.
