Preguntas frecuentes de entrevistas React actualizadas para 2026
Introduccion a los conceptos esenciales de React para entrevistas tecnicas
React sigue siendo uno de los frameworks mas demandados en el mercado laboral de desarrollo frontend. Las entrevistas tecnicas suelen evaluar no solo el conocimiento de la sintaxis basica, sino la comprension profunda de sus mecanismos internos, patrones de diseno y mejores practicas actualizadas. En este articulo se abordan treinta conceptos y preguntas frecuentes que aparecen de manera recurrente en procesos de seleccion para puestos de desarrollador React. Se incluyen explicaciones claras, ejemplos de codigo modernos basados en React 18 y 19, y consideraciones sobre rendimiento, mantenibilidad y seguridad. El objetivo es ofrecer un recurso completo que permita consolidar conocimientos y prepararse con confianza para enfrentar desafios reales en entrevistas y en el trabajo diario.
Map y filter en el manejo de listas
El metodo map transforma cada elemento de un array en un nuevo valor, mientras que filter selecciona elementos que cumplen una condicion. En React se utilizan constantemente para renderizar listas dinamicas. Es fundamental entender que ambos metodos generan un nuevo array sin mutar el original, lo que se alinea con el principio de inmutabilidad.
Cuando se renderiza una lista con map, cada elemento debe recibir una key unica. Filter se combina frecuentemente con map para mostrar solo los datos relevantes. Un error comun es olvidar que estas operaciones se ejecutan en cada render si no se memorizan adecuadamente.
const usuarios = [
{ id: 1, nombre: "Ana", activo: true },
{ id: 2, nombre: "Luis", activo: false },
{ id: 3, nombre: "Maria", activo: true },
];
function ListaUsuarios() {
const activos = usuarios
.filter((usuario) => usuario.activo)
.map((usuario) => <li key={usuario.id}>{usuario.nombre}</li>);
return <ul>{activos}</ul>;
}
Este patron es eficiente para listas pequenas o medianas. Para conjuntos de datos muy grandes se recomienda virtualizacion o paginacion.
Estados en React y el hook useState
El estado representa datos que pueden cambiar a lo largo del ciclo de vida de un componente y provocan una nueva renderizacion cuando se actualizan. Desde React 16.8 el hook useState es la forma estandar de manejar estado en componentes funcionales.
useState devuelve un par: el valor actual y una funcion para actualizarlo. Las actualizaciones son asincronas y React puede agrupar multiples cambios para optimizar el rendimiento. Cuando el nuevo estado depende del anterior, se debe usar la forma funcional del setter.
import { useState } from "react";
function Contador() {
const [contador, setContador] = useState(0);
const incrementar = () => {
setContador((prev) => prev + 1);
};
return (
<div>
<p>Valor actual: {contador}</p>
<button onClick={incrementar}>Incrementar</button>
</div>
);
}
Evitar mutar el estado directamente es una regla de oro. Siempre se debe crear un nuevo valor. Para estados complejos se puede combinar useState con useReducer.
Props en React y el flujo de datos unidireccional
Las props son la forma principal de pasar datos desde un componente padre a un hijo. Son de solo lectura para el componente que las recibe. Este diseno refuerza el flujo de datos unidireccional que caracteriza a React.
Cuando se necesitan pasar muchas props, se puede usar el operador spread o agruparlas en un objeto. Las props tambien pueden ser funciones, lo que permite la comunicacion de hijos hacia padres mediante callbacks.
function TarjetaUsuario({ nombre, edad, onSaludar }) {
return (
<div>
<h3>{nombre}</h3>
<p>Edad: {edad}</p>
<button onClick={() => onSaludar(nombre)}>Saludar</button>
</div>
);
}
function App() {
const manejarSaludo = (nombre) => {
console.log(`Hola ${nombre}`);
};
return (
<TarjetaUsuario nombre="Carlos" edad={28} onSaludar={manejarSaludo} />
);
}
PropTypes o TypeScript ayudan a documentar y validar las props esperadas, reduciendo errores en tiempo de desarrollo.
Expresiones condicionales en linea
React permite renderizar contenido de forma condicional de manera declarativa. Las formas mas comunes son el operador ternario y el operador logico &&. Ambas se integran directamente en el JSX.
El operador && es util cuando se desea mostrar u ocultar un elemento completo. El ternario permite elegir entre dos opciones. Se debe tener cuidado con valores falsy como cero o cadenas vacias que pueden generar comportamientos inesperados.
function MensajeEstado({ cargando, error, datos }) {
return (
<div>
{cargando && <p>Cargando datos...</p>}
{error ? <p>Error: {error}</p> : null}
{datos && <p>Datos recibidos correctamente</p>}
</div>
);
}
Para logica mas compleja es preferible extraer la condicion a una variable o crear un componente separado, manteniendo el JSX limpio y legible.
Manejo de eventos en React
Los eventos en React se manejan mediante props que comienzan con on, como onClick, onChange o onSubmit. A diferencia del DOM nativo, React utiliza un sistema de eventos sinteticos que normaliza el comportamiento entre navegadores.
Las funciones de manejo de eventos reciben un objeto SyntheticEvent. Es importante no llamar a la funcion directamente en el JSX para evitar ejecuciones en cada render. Se recomienda usar funciones flecha o metodos enlazados.
function FormularioSimple() {
const manejarEnvio = (evento) => {
evento.preventDefault();
console.log("Formulario enviado");
};
return (
<form onSubmit={manejarEnvio}>
<button type="submit">Enviar</button>
</form>
);
}
En componentes de clase se utilizaba el metodo bind, pero con hooks y funciones flecha este paso ya no es necesario en la mayoria de casos.
Keys en listas de React
Las keys ayudan a React a identificar que elementos han cambiado, se han agregado o eliminado. Deben ser unicas entre hermanos y estables a lo largo del tiempo. Usar el indice del array como key solo es aceptable cuando la lista es estatica y no se reordena.
Una key mal elegida puede provocar bugs sutiles, como perdida de estado en inputs o animaciones incorrectas. Lo ideal es utilizar identificadores unicos provenientes de los datos.
function ListaTareas({ tareas }) {
return (
<ul>
{tareas.map((tarea) => (
<li key={tarea.id}>{tarea.texto}</li>
))}
</ul>
);
}
Nunca se deben generar keys aleatorias en cada render, ya que esto fuerza a React a recrear todos los elementos.
Formularios en React
Los formularios se construyen combinando inputs controlados o no controlados con manejadores de eventos. El atributo value y el evento onChange son la base de los formularios controlados.
Para formularios complejos se recomienda agrupar el estado en un unico objeto y actualizarlo de forma inmutable. La validacion se puede realizar tanto en el cliente como en el servidor.
import { useState } from "react";
function FormularioRegistro() {
const [formulario, setFormulario] = useState({
nombre: "",
email: "",
});
const manejarCambio = (evento) => {
const { name, value } = evento.target;
setFormulario((prev) => ({
...prev,
[name]: value,
}));
};
return (
<form>
<input
name="nombre"
value={formulario.nombre}
onChange={manejarCambio}
/>
<input
name="email"
value={formulario.email}
onChange={manejarCambio}
/>
</form>
);
}
Este enfoque facilita la sincronizacion entre la interfaz y el estado de la aplicacion.
Inputs dinamicos en formularios
Cuando el numero de campos puede variar, se gestionan arrays de objetos en el estado. Cada input se identifica mediante un indice o un identificador unico.
Agregar, eliminar o modificar campos dinamicos requiere actualizaciones inmutables del array. useFieldArray de bibliotecas como React Hook Form simplifica este proceso, pero es importante entender el mecanismo subyacente.
function InputsDinamicos() {
const [campos, setCampos] = useState([{ id: 1, valor: "" }]);
const agregarCampo = () => {
setCampos((prev) => [...prev, { id: Date.now(), valor: "" }]);
};
const actualizarCampo = (id, nuevoValor) => {
setCampos((prev) =>
prev.map((campo) =>
campo.id === id ? { ...campo, valor: nuevoValor } : campo
)
);
};
return (
<div>
{campos.map((campo) => (
<input
key={campo.id}
value={campo.valor}
onChange={(e) => actualizarCampo(campo.id, e.target.value)}
/>
))}
<button onClick={agregarCampo}>Agregar campo</button>
</div>
);
}
Este patron es util en formularios de productos, habilidades o cualquier lista de elementos variables.
Estilos CSS en componentes React
Existen varias formas de aplicar estilos: hojas de estilo tradicionales, CSS Modules, styled-components, Emotion o Tailwind CSS. Cada enfoque tiene ventajas segun el tamano del proyecto y las preferencias del equipo.
Los estilos en linea se definen como objetos JavaScript y se aplican mediante la prop style. Son utiles para valores dinamicos, pero no soportan pseudo-clases ni media queries de forma nativa.
function BotonPersonalizado({ color }) {
const estilo = {
backgroundColor: color,
padding: "10px 20px",
border: "none",
borderRadius: "4px",
};
return <button style={estilo}>Click aqui</button>;
}
CSS Modules ofrece encapsulamiento local de clases, mientras que las soluciones CSS-in-JS permiten estilos completamente dinamicos y theming avanzado.
Componentes controlados frente a no controlados
Los componentes controlados mantienen el valor del input en el estado de React. Los no controlados delegan el manejo del valor al DOM y se accede a el mediante refs.
Los controlados ofrecen mayor control y facilitan la validacion en tiempo real. Los no controlados pueden ser mas simples para formularios basicos o cuando se integra con bibliotecas externas.
import { useRef } from "react";
function FormularioNoControlado() {
const inputRef = useRef(null);
const manejarEnvio = (evento) => {
evento.preventDefault();
console.log(inputRef.current.value);
};
return (
<form onSubmit={manejarEnvio}>
<input ref={inputRef} defaultValue="valor inicial" />
<button type="submit">Enviar</button>
</form>
);
}
La eleccion depende del nivel de control requerido y de la complejidad de la logica de validacion.
El Virtual DOM y su importancia
El Virtual DOM es una representacion ligera del DOM real en memoria. React compara el Virtual DOM anterior con el nuevo mediante un proceso llamado reconciliation y aplica solo los cambios necesarios al DOM real.
Este mecanismo permite que las actualizaciones sean eficientes y que el desarrollador escriba codigo de forma declarativa. React 18 introdujo mejoras significativas en la concurrencia que optimizan aun mas este proceso.
Comprender el Virtual DOM ayuda a evitar re-renderizados innecesarios y a escribir componentes mas performantes. Herramientas como React DevTools permiten inspeccionar el comportamiento de reconciliacion.
Uso de dangerouslySetInnerHTML
La prop dangerouslySetInnerHTML permite insertar HTML crudo en un componente. Su nombre advierte sobre los riesgos de seguridad asociados a la inyeccion de codigo malicioso.
Solo debe utilizarse cuando se confia plenamente en la fuente del HTML o despues de sanitizar el contenido. Bibliotecas como DOMPurify son recomendadas para limpiar el HTML antes de insertarlo.
function ContenidoHtml({ htmlSeguro }) {
return <div dangerouslySetInnerHTML={{ __html: htmlSeguro }} />;
}
En la mayoria de casos es preferible renderizar componentes React en lugar de HTML crudo.
React Fragments para evitar nodos extras
Los Fragments permiten agrupar multiples elementos sin agregar nodos adicionales al DOM. Se escriben como <>…</> o como <React.Fragment>.
Son especialmente utiles cuando se necesita devolver varios elementos desde un componente o cuando se trabaja con tablas y listas que no admiten contenedores extras.
function ListaConEncabezado() {
return (
<>
<h2>Titulo de la lista</h2>
<ul>
<li>Elemento uno</li>
<li>Elemento dos</li>
</ul>
</>
);
}
Los Fragments con key se utilizan cuando se itera sobre colecciones que requieren identificadores.
Componentes sin estado frente a con estado
Los componentes sin estado reciben datos exclusivamente a traves de props y no gestionan estado interno. Los componentes con estado mantienen su propio estado y pueden modificarlo.
Con la llegada de los hooks, la distincion se volvio mas flexible, ya que cualquier componente funcional puede incorporar estado. Sin embargo, seguir el principio de separar presentacion de logica sigue siendo una buena practica.
Los componentes de presentacion se centran en la interfaz, mientras que los contenedores gestionan datos y logica. Esta separacion mejora la reutilizacion y facilita las pruebas.
Solicitudes a APIs REST desde React
Las peticiones HTTP se realizan generalmente con fetch o axios dentro de useEffect. Es importante manejar los estados de carga, error y exito, asi como cancelar peticiones pendientes cuando el componente se desmonta.
import { useState, useEffect } from "react";
function ListaProductos() {
const [productos, setProductos] = useState([]);
const [cargando, setCargando] = useState(true);
useEffect(() => {
const controlador = new AbortController();
fetch("https://api.ejemplo.com/productos", {
signal: controlador.signal,
})
.then((respuesta) => respuesta.json())
.then((datos) => {
setProductos(datos);
setCargando(false);
})
.catch((error) => {
if (error.name !== "AbortError") {
console.error(error);
}
});
return () => controlador.abort();
}, []);
if (cargando) return <p>Cargando...</p>;
return (
<ul>
{productos.map((producto) => (
<li key={producto.id}>{producto.nombre}</li>
))}
</ul>
);
}
React Query o SWR ofrecen abstracciones mas robustas para el manejo de datos asincronos, incluyendo cache y revalidacion automatica.
Debouncing en interacciones del usuario
El debouncing retrasa la ejecucion de una funcion hasta que haya pasado un tiempo determinado sin nuevas invocaciones. Es util en busquedas en tiempo real, validaciones o llamadas a APIs mientras el usuario escribe.
Se puede implementar con un temporizador propio o utilizando bibliotecas como lodash.debounce. En React se combina frecuentemente con useEffect y useState.
import { useState, useEffect } from "react";
function Buscador() {
const [termino, setTermino] = useState("");
const [resultado, setResultado] = useState("");
useEffect(() => {
const temporizador = setTimeout(() => {
if (termino) {
setResultado(`Resultados para: ${termino}`);
}
}, 500);
return () => clearTimeout(temporizador);
}, [termino]);
return (
<div>
<input
value={termino}
onChange={(e) => setTermino(e.target.value)}
placeholder="Buscar..."
/>
<p>{resultado}</p>
</div>
);
}
Este patron reduce significativamente la cantidad de operaciones costosas durante la interaccion del usuario.
Context API para estado global
La Context API permite compartir datos entre componentes sin necesidad de pasar props manualmente a traves de multiples niveles. Se crea un contexto, se provee un valor y se consume con useContext.
Es adecuado para temas, autenticacion o configuraciones globales. Para estados muy complejos o con actualizaciones frecuentes se recomienda combinarlo con useReducer o bibliotecas especializadas.
import { createContext, useContext, useState } from "react";
const TemaContext = createContext();
function ProveedorTema({ children }) {
const [tema, setTema] = useState("claro");
return (
<TemaContext.Provider value={{ tema, setTema }}>
{children}
</TemaContext.Provider>
);
}
function BotonTema() {
const { tema, setTema } = useContext(TemaContext);
return (
<button onClick={() => setTema(tema === "claro" ? "oscuro" : "claro")}>
Cambiar a tema {tema === "claro" ? "oscuro" : "claro"}
</button>
);
}
Evitar colocar estados que cambian con alta frecuencia en un contexto de alto nivel para no provocar re-renderizados innecesarios.
Diferencia entre class y className
En JSX se utiliza className en lugar de class porque class es una palabra reservada en JavaScript. React convierte className al atributo class del DOM durante el renderizado.
Este es uno de los detalles mas basicos pero que suele aparecer en entrevistas para evaluar la atencion a la sintaxis de JSX.
function ElementoEstilado() {
return <div className="contenedor principal">Contenido</div>;
}
Cuando se trabaja con CSS Modules, className recibe el identificador generado automaticamente por el sistema de modulos.
Higher Order Components
Un Higher Order Component es una funcion que recibe un componente y devuelve un nuevo componente con funcionalidad adicional. Se utilizaban ampliamente antes de los hooks para reutilizar logica.
Aunque los hooks han reducido su necesidad, siguen siendo utiles en ciertos escenarios de bibliotecas o cuando se necesita envolver componentes de forma dinamica.
function conAutenticacion(Componente) {
return function ComponenteAutenticado(props) {
const estaAutenticado = true; // logica real aqui
if (!estaAutenticado) {
return <p>Debes iniciar sesion</p>;
}
return <Componente {...props} />;
};
}
const PanelPrivado = conAutenticacion(function Panel() {
return <div>Contenido privado</div>;
});
Los hooks personalizados suelen ser una alternativa mas sencilla y legible en la mayoria de casos modernos.
Lazy loading de componentes
React.lazy permite cargar componentes de forma diferida, reduciendo el tamano del bundle inicial. Se combina con Suspense para mostrar un fallback mientras se carga el codigo.
Esta tecnica es fundamental para aplicaciones grandes donde no todo el codigo se necesita en la primera carga.
import { lazy, Suspense } from "react";
const PanelAdministracion = lazy(() => import("./PanelAdministracion"));
function App() {
return (
<Suspense fallback={<p>Cargando panel...</p>}>
<PanelAdministracion />
</Suspense>
);
}
El lazy loading mejora los tiempos de carga percibidos y el rendimiento general de la aplicacion.
Funciones auxiliares en componentes
Las funciones auxiliares ayudan a mantener el codigo de los componentes limpio y legible. Pueden definirse fuera del componente si no dependen de props o estado, o dentro si necesitan acceso a ellos.
Extraer logica compleja a funciones puras facilita las pruebas unitarias y la reutilizacion.
function calcularTotal(items) {
return items.reduce((suma, item) => suma + item.precio, 0);
}
function Carrito({ items }) {
const total = calcularTotal(items);
return <p>Total: {total}</p>;
}
Evitar definir funciones pesadas dentro del cuerpo del componente si no es necesario, para no recrearlas en cada render.
Implementacion de recursion en componentes
La recursion permite renderizar estructuras de datos jerarquicas como arboles o menus anidados. Un componente se llama a si mismo para procesar los hijos.
Es importante definir una condicion de salida clara para evitar bucles infinitos.
function NodoArbol({ nodo }) {
return (
<li>
{nodo.nombre}
{nodo.hijos && (
<ul>
{nodo.hijos.map((hijo) => (
<NodoArbol key={hijo.id} nodo={hijo} />
))}
</ul>
)}
</li>
);
}
Este patron es comun en exploradores de archivos, organigramas o menus de navegacion multinivel.
Ejecucion de arrays de funciones
En ocasiones se necesita ejecutar una secuencia de funciones almacenadas en un array. Esto es util en middlewares, pipelines de validacion o sistemas de plugins.
Se puede lograr con un bucle o con el metodo reduce para encadenar promesas o valores.
const validaciones = [
(valor) => valor.length > 0,
(valor) => valor.includes("@"),
(valor) => valor.length < 100,
];
function validarEmail(email) {
return validaciones.every((fn) => fn(email));
}
Este enfoque facilita la extension de la logica sin modificar el codigo principal.
Creacion de custom hooks
Los custom hooks permiten extraer y reutilizar logica con estado entre componentes. Deben comenzar con la palabra use y pueden componer otros hooks.
Son una de las caracteristicas mas poderosas de React moderno y aparecen con frecuencia en entrevistas.
import { useState, useEffect } from "react";
function useLocalStorage(clave, valorInicial) {
const [valor, setValor] = useState(() => {
const guardado = localStorage.getItem(clave);
return guardado ? JSON.parse(guardado) : valorInicial;
});
useEffect(() => {
localStorage.setItem(clave, JSON.stringify(valor));
}, [clave, valor]);
return [valor, setValor];
}
function Componente() {
const [nombre, setNombre] = useLocalStorage("nombre", "");
return <input value={nombre} onChange={(e) => setNombre(e.target.value)} />;
}
Los custom hooks mejoran la organizacion del codigo y facilitan la separacion de responsabilidades.
Promesas y async await en React
Las operaciones asincronas se manejan con promesas o con la sintaxis async await. Dentro de useEffect se recomienda definir una funcion asincrona interna, ya que el callback de useEffect no puede ser asincrono directamente.
El manejo correcto de errores y la cancelacion de operaciones pendientes son aspectos criticos.
import { useState, useEffect } from "react";
function DatosUsuario({ id }) {
const [usuario, setUsuario] = useState(null);
useEffect(() => {
let activo = true;
async function obtenerUsuario() {
try {
const respuesta = await fetch(`/api/usuarios/${id}`);
const datos = await respuesta.json();
if (activo) {
setUsuario(datos);
}
} catch (error) {
console.error(error);
}
}
obtenerUsuario();
return () => {
activo = false;
};
}, [id]);
return usuario ? <p>{usuario.nombre}</p> : <p>Cargando...</p>;
}
Este patron evita actualizaciones de estado en componentes desmontados.
Code splitting con importaciones dinamicas
El code splitting divide el codigo en chunks mas pequenos que se cargan bajo demanda. Ademas de React.lazy, se pueden usar importaciones dinamicas en cualquier parte de la aplicacion.
Esta tecnica es esencial para optimizar el rendimiento de aplicaciones de gran escala.
async function cargarModulo() {
const modulo = await import("./moduloPesado");
modulo.ejecutar();
}
Combinado con rutas, permite cargar solo el codigo necesario para la vista actual.
Creacion de un filtro de busqueda
Un filtro de busqueda combina estado, eventos y metodos de array para mostrar resultados en tiempo real. Se puede mejorar con debouncing para evitar filtrados excesivos.
import { useState } from "react";
function FiltroBusqueda({ elementos }) {
const [busqueda, setBusqueda] = useState("");
const filtrados = elementos.filter((elemento) =>
elemento.nombre.toLowerCase().includes(busqueda.toLowerCase())
);
return (
<div>
<input
value={busqueda}
onChange={(e) => setBusqueda(e.target.value)}
placeholder="Buscar..."
/>
<ul>
{filtrados.map((elemento) => (
<li key={elemento.id}>{elemento.nombre}</li>
))}
</ul>
</div>
);
}
Este componente es la base de muchas interfaces de usuario interactivas.
Incorporacion de TypeScript en proyectos React
TypeScript agrega tipado estatico a JavaScript, mejorando la deteccion temprana de errores y la experiencia de desarrollo. En React se tipan props, estados y eventos.
interface Props {
nombre: string;
edad: number;
activo?: boolean;
}
function Saludo({ nombre, edad, activo = true }: Props) {
return (
<p>
Hola {nombre}, tienes {edad} anos.
{activo ? " Estas activo." : " Estas inactivo."}
</p>
);
}
El uso de interfaces y tipos genericos permite crear componentes mas seguros y autodocumentados.
Pruebas con React Testing Library
React Testing Library fomenta pruebas centradas en el comportamiento del usuario en lugar de los detalles de implementacion. Se enfoca en consultar elementos de la forma en que lo haria un usuario real.
import { render, screen, fireEvent } from "@testing-library/react";
import Contador from "./Contador";
test("incrementa el contador al hacer clic", () => {
render(<Contador />);
const boton = screen.getByText("Incrementar");
fireEvent.click(boton);
expect(screen.getByText("Valor actual: 1")).toBeInTheDocument();
});
Este enfoque produce pruebas mas robustas y menos propensas a romperse ante cambios de implementacion.
Almacenamiento en cache de respuestas de API
El caching evita solicitudes repetidas innecesarias y mejora la experiencia del usuario. Se puede implementar manualmente con un objeto o Map, o utilizar bibliotecas especializadas.
const cache = new Map();
async function obtenerConCache(url) {
if (cache.has(url)) {
return cache.get(url);
}
const respuesta = await fetch(url);
const datos = await respuesta.json();
cache.set(url, datos);
return datos;
}
En aplicaciones reales se suelen combinar estrategias de cache con invalidacion y revalidacion en segundo plano.
Conclusiones
Dominar estos treinta conceptos proporciona una base solida para enfrentar entrevistas tecnicas de React y para desarrollar aplicaciones robustas y mantenibles. La comprension del Virtual DOM, el manejo correcto del estado, el uso eficiente de hooks y las tecnicas de optimizacion como el lazy loading y el code splitting son habilidades diferenciadoras. La practica continua con ejemplos reales, la escritura de pruebas y la adopcion de TypeScript refuerzan la calidad del codigo. Mantenerse actualizado con las mejoras de React y las mejores practicas de la comunidad asegura una evolucion constante como profesional del desarrollo frontend.