Guía Completa de React.js - Estilo Entrevista
Técnica
¿Por qué React?
Pregunta típica: ¿Por qué elegiste React para tus proyectos o por qué te parece una buena
herramienta?
Respuesta esperada: "Elegí React por su enfoque declarativo y su arquitectura basada en
componentes, lo que facilita la reutilización y el mantenimiento del código. El Virtual DOM mejora el
rendimiento, y su ecosistema ofrece herramientas como React Router, Redux, y bibliotecas para testing
y styling. Además, su amplia comunidad significa mejor soporte y recursos actualizados."
Enrutamientos
React Router DOM
Pregunta: ¿Cómo manejas el enrutamiento en una app React?
Respuesta: "Uso React Router DOM para definir rutas principales y secundarias. Permite navegación
sin recarga y admite rutas dinámicas, protegidas y anidadas."
Rutas Protegidas
Pregunta: ¿Cómo protegerías rutas para usuarios autenticados?
Respuesta: "Creo un componente wrapper PrivateRoute que verifica si el usuario está autenticado
y, en caso contrario, redirige al login."
Enrutamiento Anidado
Pregunta: ¿Has trabajado con rutas anidadas?
Respuesta: "Sí, por ejemplo en un dashboard. Defino una ruta padre y dentro, rutas hijas usando
<Outlet /> ."
Obtener Query Params
Pregunta: ¿Cómo obtienes datos de la URL?
Respuesta: "Uso
useSearchParams()
o
useLocation()
consulta."
1
para acceder a los parámetros de
Manejo de Estados
Context API
Pregunta: ¿Cuándo usarías Context API?
Respuesta: "Cuando necesito compartir estado entre múltiples componentes sin pasar props
intermedias. Ideal para temas, auth, o configuración global."
useReducer
Pregunta: ¿Qué ventajas ofrece useReducer frente a useState ?
Respuesta: " useReducer
permite manejar estados complejos y lógica de actualización más
estructurada, especialmente útil cuando hay múltiples acciones sobre el estado."
Redux Toolkit
Pregunta: ¿Por qué preferir Redux Toolkit?
Respuesta: "Simplifica la configuración de Redux, reduce boilerplate y agrega herramientas modernas
como slices, createAsyncThunk y middleware integrados."
Redux Query
Pregunta: ¿Qué es Redux Query?
Respuesta: "Es una extensión de Redux Toolkit que permite manejar peticiones HTTP y su estado
(loading, error, data) con caché incluida."
SWR
Pregunta: ¿Qué ventajas ofrece SWR?
Respuesta: "SWR gestiona el caché de datos, la revalidación y la actualización automática. Lo uso en
componentes que consumen APIs que cambian frecuentemente."
Zustand
Pregunta: ¿Has usado Zustand?
Respuesta: "Sí, me gusta por su simplicidad y porque se integra con React sin necesidad de boilerplate.
Ideal para proyectos medianos."
Jotai
Pregunta: ¿Qué te parece Jotai frente a otras soluciones?
Respuesta: "Es ideal para controlar el estado a nivel de átomo. Muy útil en apps donde cada
componente necesita su propio estado y se requiere fine-grained reactivity."
2
ReactNode vs JSX.Element
Pregunta: ¿Cuál es la diferencia entre ReactNode y JSX.Element ?
Respuesta: " JSX.Element es el tipo devuelto por JSX, mientras que ReactNode incluye strings,
arrays, fragments o elementos JSX. Para props flexibles, prefiero ReactNode ."
useMemo vs useCallback vs useRef vs memo
Pregunta: ¿Cuándo usarías cada uno?
Respuesta: - useMemo : para memorizar resultados de funciones pesadas. - useCallback : para
evitar recrear funciones pasadas como props. - useRef : para referencias mutables sin re-render. memo : para evitar re-render si las props no cambiaron.
Detección de Cambios
Pregunta: ¿Cuándo ocurre un re-render en React?
Respuesta: "Cuando cambia el estado, las props, el context o el key de un elemento."
¿Qué hace el StrictMode? "En desarrollo, renderiza dos veces para detectar efectos secundarios no
controlados."
¿Cómo evitar renders innecesarios? "Uso
React.memo ,
useMemo ,
useCallback
y divido
componentes."
Compartir información entre componentes
Pregunta: ¿Cómo compartes información entre componentes no relacionados?
Respuesta: "Si son hermanos, uso Context o un store (Zustand). Si es de padre a hijo, prefiero
composition pattern para evitar props drilling."
¿Por qué evitar context para todo? "Porque al cambiar su valor, todos los consumidores se renderizan.
Composition mejora el rendimiento y la testabilidad."
Batching de Estados
Pregunta: ¿Qué es el batching en React?
3
Respuesta: "React agrupa múltiples setState para renderizar solo una vez. Desde React 18, también
lo hace en eventos asincrónicos."
React 19
Pregunta: ¿Qué novedades trae React 19?
Respuesta: "Incluye el nuevo compilador que optimiza automáticamente el código sin necesidad de
useMemo . Además, mejora Server Components y agrega hooks como useFormStatus ."
useState & useEffect
Pregunta: ¿Cuándo usarías useEffect ?
Respuesta: "Para ejecutar efectos secundarios como fetch de datos o suscripciones. Solo se debe usar
si el efecto depende del ciclo de vida."
¿Qué pasa si la función es async? "No se puede marcar directamente async , pero se puede declarar
una función dentro del efecto que lo sea."
React Hook Form
Pregunta: ¿Por qué usar React Hook Form?
Respuesta: "Porque es liviano, rápido y no requiere re-renders constantes. Maneja la validación y el
registro de campos de forma eficiente."
¿Cómo haces validación con schemas? "Integro Zod o Yup con el resolver correspondiente y defino
reglas claras y escalables."
¿Qué arquitectura prefieres para formularios? "Uso Container/Presentational o Clean Architecture
para separar lógica y vista."
¿Qué usas para llamadas API? "Axios con interceptores para manejar tokens y errores globales."
Portals
Pregunta: ¿Para qué usarías un Portal en React?
Respuesta: "Para renderizar modales, tooltips o popups fuera del DOM jerárquico, evitando conflictos
de estilos o z-index."
4
High Order Components (HOC)
Pregunta: ¿Qué es un HOC?
Respuesta: "Una función que toma un componente y devuelve otro con lógica adicional. Útil para auth,
logging, etc."
Custom Hooks
Pregunta: ¿Cuándo creas un custom hook?
Respuesta: "Cuando una lógica con hooks nativos se repite entre componentes. Permite separar
preocupaciones y reutilizar código."
Suspense y Lazy
Pregunta: ¿Qué es React.lazy y Suspense ?
Respuesta: "Permiten carga bajo demanda (code splitting).
React.lazy
carga componentes y
Suspense define la UI mientras carga."
Tipos de Styling en React
Pregunta: ¿Qué formas de estilos usas en React?
Respuesta: "Uso CSS Modules para scoping automático, inline styles para cambios dinámicos y Styled
Components si necesito CSS-in-JS."
ErrorBoundary
Pregunta: ¿Qué es un ErrorBoundary?
Respuesta: "Un componente de clase que atrapa errores de renderizado. Evita que toda la app colapse
mostrando una UI alternativa."
5