Preguntas de entrevista

¿Cuáles son los tipos de datos primitivos y no primitivos?

Primitivos: String, Number, Boolean, Null, Undefined, Symbol, BigInt.
No primitivos: Objetos, Arrays, Funciones (tipos por referencia).

¿Qué es pasar por valor y pasar por referencia?

Pasar por valor: se pasa una copia del valor (primitivos).
Pasar por referencia: se pasa una referencia al dato original (objetos).

¿Qué es el scope léxico?

El alcance se determina por la ubicación física del código; las funciones internas tienen acceso al alcance externo.

¿Qué es el hoisting?

El comportamiento de JavaScript de mover las declaraciones de variables y funciones al inicio de su ámbito.

¿Qué es el event loop en JavaScript?

Maneja callbacks asíncronos sacando tareas de la cola de eventos y ejecutándolas una por una.

¿Qué son las funciones puras y las impuras?

Puras: sin efectos secundarios, mismo resultado para la misma entrada.
Impuras: causan efectos secundarios o dependen de un estado externo.

¿Qué son las funciones de orden superior?

Funciones que toman otras funciones como argumentos o las devuelven.

¿Qué son los anagramas?

Dos cadenas que contienen las mismas letras en un orden diferente.

¿Cuál es la diferencia entre una función normal y una función flecha (arrow)?

Funciones normales: tienen su propio this, se pueden usar como constructores y se someten a hoisting.
Funciones flecha: heredan this del scope léxico, no pueden ser constructores y no se hacen hoisting.

¿Cuál es la diferencia entre copia superficial (shallow copy) y copia profunda (deep copy)?

La copia superficial duplica solo la estructura de primer nivel; los objetos anidados siguen apuntando al original.
La copia profunda duplica todo de forma recursiva, creando copias completamente independientes.

¿Cuáles son las diferencias entre componentes de clase y componentes funcionales?

Clase: usa métodos de ciclo de vida, this y estado.
Funcional: usa hooks, sintaxis más simple y código más limpio.

¿A qué se refiere `this` en React?

En componentes de clase, this se refiere a la instancia de la clase actual.

¿Cuál es el ciclo de vida de un componente de React?

Montaje, Actualización, Desmontaje (por ejemplo: componentDidMount, componentDidUpdate, componentWillUnmount).

¿Qué son los componentes controlados y no controlados?

Controlados: los elementos de formulario cuyo valor está controlado por el estado de React.
No controlados: el DOM gestiona el estado usando refs.

¿Qué son `useMemo` y `useCallback` y en qué se diferencian?

useMemo memoriza/caché el resultado de una función.
useCallback memoriza/caché la referencia de la función.

¿Qué son los hooks personalizados y cómo afectan al rendimiento?

Funciones reutilizables construidas con hooks; mejoran la reutilización de código, pero deben optimizarse para evitar renderizados innecesarios.

Si quiero reducir los re-renderizados, ¿cuál es el mejor enfoque?

Usar React.memo, useMemo, useCallback y evitar actualizaciones innecesarias de estado/props.

¿Cuáles son las principales causas de re-renderizado?

Cambios en el estado o en las props, re-render del componente padre y actualizaciones de contexto.

Si un valor cambia en el componente padre y no quiero que el hijo se vuelva a renderizar, ¿qué harías?

Envuelve el hijo con React.memo y evita pasar referencias nuevas.

¿Qué es `React.memo`?

Un HOC que memoriza un componente funcional para evitar re-renders a menos que cambien las props.

¿Qué son los componentes de orden superior (HOC) y las funciones de orden superior (HOF)?

HOC: una función que toma un componente y devuelve uno nuevo.
HOF: funciones que devuelven o aceptan otras funciones.

¿Qué es `forwardRef`?

Una API de React para pasar un ref a través de un componente hasta el nodo del componente hijo.

¿Qué es Context y explica su flujo?

Permite compartir estado global mediante Provider y Consumer o el hook useContext.

¿Qué es Redux y explica su flujo?

Gestión centralizada de estado. Flujo: Action -> Reducer -> Store -> View.

¿Qué middleware usa Redux?

Una función que intercepta acciones antes de que lleguen a los reducers (por ejemplo: redux-thunk).

¿Cuál es la diferencia entre middleware y reducer en Redux?

El middleware gestiona efectos secundarios; el reducer actualiza el estado en función de las acciones.

¿Qué es mejor: Redux o Context?

Context es simple y va bien para apps pequeñas. Redux es mejor para apps grandes y complejas con necesidades avanzadas de manejo de estado.

¿Cuál es la diferencia entre React y React Native?

React: para apps web usando HTML/CSS/JS. React Native: para apps móviles usando componentes nativos.

¿Qué es la arquitectura Fabric?

Un nuevo motor de renderizado de React Native que mejora el rendimiento y la concurrencia al unificar los hilos.

¿Qué hace Hermes?

Un motor ligero de JavaScript optimizado para React Native para mejorar el rendimiento, reducir el tamaño de la app y mejorar el tiempo hasta interactivo.

¿Qué es Babel en React Native?

Un compilador de JavaScript que transpila JavaScript moderno a código compatible con entornos más antiguos.

Axios vs Fetch – ¿cuál es mejor y por qué?

Axios tiene una sintaxis más simple, gestiona JSON por defecto, soporta interceptors y puede cancelar requests.
Fetch es nativo pero requiere más boilerplate.

¿Cuál es lo más importante de GraphQL?

Los clientes pueden pedir exactamente lo que necesitan. Usa queries y un esquema para optimizar la obtención de datos.

¿Qué significan APK y AAB?

APK: Android Package. AAB: Android App Bundle.

¿Cuál es la diferencia principal entre APK y AAB?

AAB es un formato de publicación; Play Store genera APKs por dispositivo, lo que resulta en un tamaño de app más pequeño.

Explica el proceso de los pipelines de CI/CD.

CI: construcción y pruebas automáticas en cada commit. CD: despliegue automático del código probado hacia producción.

¿Cuál es la diferencia entre map y forEach?

map devuelve un nuevo array; forEach no devuelve nada (se usa para efectos secundarios).

¿Cuál es la diferencia entre un gateway de pagos y un procesador de pagos (PSP)?

Un gateway de pagos es el servicio/API que enruta las transacciones de forma segura (a menudo manejando cifrado y tokenización). Un procesador de pagos es la entidad que realmente procesa la transacción de tarjeta a través de redes (y bancos). En la práctica, muchos PSP ofrecen ambos.

¿Cuál es el flujo típico para procesar pagos en React Native (integración tipo Stripe)?

1) La app recopila los datos de pago (info de la tarjeta) y envía a tu backend identificadores no sensibles.
2) El backend crea un PaymentIntent/Charge y devuelve un client secret.
3) La app confirma el pago usando el client secret y una clave publicable.
4) El backend finaliza el estado del pedido basándose en webhooks.

¿Por qué nunca se deben almacenar claves secretas en la app móvil?

Las apps móviles no son totalmente confiables. Las claves secretas pueden extraerse del binario o interceptarse. Mantener los secretos en el backend reduce el fraude y te ayuda a cumplir expectativas de seguridad/compliance.

¿Qué son webhooks y por qué son críticos para el estado del pago?

Los webhooks notifican a tu backend eventos asíncronos como éxito, fallo, reembolsos o reintentos. Son la fuente de verdad para el estado final del pago (en lugar de confiar solo en el resultado del cliente).

¿Cómo gestionas los reintentos de forma segura al crear cargos?

Usa claves de idempotencia en el backend para que solicitudes repetidas (por timeouts o reintentos del cliente) no creen cargos duplicados. Además, implementa verificaciones correctas del estado del pedido antes de reintentar.

¿Cuál es un flujo de reembolso seguro?

Inicia los reembolsos desde el backend, registra la intención/estado del reembolso en tu base de datos y actualiza la UI/el estado del pedido según los webhooks. Maneja reembolsos parciales y asegúrate de poder reconciliar estados tras retrasos.

¿Cuál es el propósito del native bridging en React Native?

Bridging es la forma en que JavaScript se comunica con código nativo (y cómo los módulos nativos se comunican de vuelta). Te permite llamar APIs de plataforma desde JS y exponer funcionalidades nativas como módulos o componentes accesibles desde JS.

¿Cómo se expone un módulo nativo a JavaScript?

Implementas un módulo nativo, lo registras con el runtime de React Native y defines firmas/ parámetros de métodos para que el lado JS lo pueda llamar (y opcionalmente emitir eventos). En la nueva arquitectura, specs/codegen generan bindings con más fuerza.

¿Cuándo debes usar `NativeEventEmitter` (eventos) en lugar de llamar a un método nativo?

Cuando el lado nativo produce eventos continuos o asíncronos (por ejemplo: actualizaciones de ubicación, Bluetooth o progreso de descarga). Los eventos son mejores que el polling porque evitan llamadas JS->nativo frecuentes.

¿Qué problemas de rendimiento son comunes con el bridge clásico?

Demasiadas llamadas pequeñas al bridge, payloads JSON grandes y serialización/deserialización frecuente. Para mejorar rendimiento: agrupa el trabajo, reduce el tamaño de los payloads, evita llamadas de alta frecuencia y mueve los cálculos pesados hacia JSI/TurboModules cuando sea apropiado.

¿Cuál es la diferencia entre un módulo nativo y un componente UI nativo?

Los módulos nativos normalmente se invocan de forma imperativa desde JS para acciones/datos. Los componentes UI nativos se renderizan como parte de la jerarquía de vistas y soportan layout/props/eventos similares a los componentes de React.

¿Qué son los TurboModules en la nueva arquitectura de React Native?

Los TurboModules son un mecanismo para llamar funcionalidades nativas desde JS con mejor rendimiento usando JSI y bindings generados. Reducen la sobrecarga frente al bridge clásico serializado.

¿En qué se diferencian los TurboModules del bridge clásico?

El bridge clásico normalmente usa paso de mensajes con serialización y tiene más limitaciones para acceso síncrono. Los TurboModules usan bindings directos vía JSI, habilitando mejor rendimiento y soportando llamadas síncronas cuando es seguro.

¿Qué hace codegen para TurboModules?

Codegen lee una especificación del módulo (types/spec) y genera los bindings JS/TS y la glue nativa para que ambos lados coincidan en los nombres de métodos y la forma de los argumentos, mejorando la seguridad de tipos y reduciendo boilerplate manual.

¿Cuándo un método de TurboModule puede ser síncrono vs asíncrono?

Síncrono se usa para operaciones que son rápidas y lo suficientemente seguras para ejecutarse inmediatamente. Asíncrono se usa para IO, trabajo largo o cuando necesitas evitar bloquear el hilo de JS.

¿Cuáles son los beneficios principales que deberías mencionar en una entrevista?

Mejor rendimiento (menos sobrecarga), tipado más sólido vía specs/codegen, contratos más claros entre JS y nativo, e integración mejorada con Fabric y el resto de la nueva arquitectura.

¿Cuáles son estrategias comunes para construir apps React Native que funcionen sin conexión?

Usa persistencia local (key-value o base de datos), cachea respuestas GET, soporta UI optimista para escrituras, encola mutaciones mientras estás offline y sincroniza los cambios cuando vuelve la conectividad.

¿Dónde guardas datos offline en el móvil?

Opciones comunes: AsyncStorage para datos pequeños tipo key-value, MMKV para caché key-value muy rápida y SQLite para datos estructurados/relacionales y datasets offline más grandes.

¿Cómo pones en cola escrituras y las reproduces más tarde?

Guarda una cola durable de operaciones pendientes localmente (con timestamps e identificadores de idempotencia). Cuando hay red, reprocesa las solicitudes en orden y actualiza el estado local según las respuestas del servidor.

¿Cómo resuelves conflictos cuando el dispositivo vuelve a conectarse?

Usa versionado (ETags/updatedAt), elige una estrategia de conflicto (last-write-wins, reglas de merge) y muestra resoluciones cuando el merge automático no sea posible.

¿Cómo detectas cambios de red en React Native?

Usa librerías como @react-native-community/netinfo para escuchar cambios de conectividad y disparar sincronización/replay cuando la app recupere la red.

¿Qué patrones UX mejoran la fiabilidad offline?

Muestra claramente el estado offline, mantén al usuario informado sobre acciones en cola, ofrece controles de reintento cuando falle la sincronización y asegúrate de que la app pueda recuperarse después de ser cerrada/reiniciada.

¿Qué son las cloud functions y por qué las usan las apps móviles?

Las cloud functions (serverless) ejecutan lógica backend sin que gestionen servidores. Los clientes móviles las usan para operaciones seguras como facturación, verificaciones de permisos, procesamiento de medios y agregación de datos.

¿Qué problemas evitan las cloud functions?

Ayudan a mantener secretos fuera del cliente, centralizar la autorización, reducir la complejidad del cliente y permitir procesamiento asíncrono (webhooks, tareas en background, sincronización programada).

¿Cómo diseñas endpoints cloud para reintentos e idempotencia?

Asume que las solicitudes pueden repetirse por timeouts o retentativas del proveedor. Usa claves de idempotencia, asegúrate de que las operaciones sean seguras para llamarse múltiples veces y devuelve resultados consistentes.

¿Cómo manejarías webhooks de pagos con cloud functions?

Crea un endpoint de webhook que verifique firmas, mapee el evento a registros internos, actualice el estado del pago/pedido en la base de datos y maneje eventos duplicados con idempotencia.

¿Cómo aseguras las cloud functions?

Usa autenticación (JWT/Firebase auth), verifica permisos/roles del solicitante, valida inputs y limita el acceso con comprobaciones del lado servidor y variables de entorno seguras.

¿Qué significa cuando una Promise se rechaza en JavaScript?

Significa que falló una operación asíncrona. El rechazo trae un valor de error (a menudo un objeto Error). Si usas await, se lanza una excepción; si usas .then, debes manejar .catch.

¿Cómo manejas Promises rechazadas con async/await?

Envuelve las llamadas que esperas (await) en un bloque try/catch, luego convierte el error capturado en un mensaje amigable y decide si reintentar o actualizar el estado de la UI.

¿Qué es un unhandled promise rejection y por qué es un problema?

Un rechazo sin manejar es una Promise rechazada sin un handler catch. Puede hacer que la app falle (o fallar silenciosamente según el entorno) y hace que los errores sean más difíciles de detectar y recuperar.

¿Cómo diferencias errores de red vs errores HTTP?

Los errores de red suelen indicar conectividad/timeout y pueden no tener código HTTP. Los errores HTTP tienen un estado de respuesta (400/401/500, etc.). Clasifica según la forma del error de tu cliente HTTP (Axios/fetch).

¿Cómo deberías implementar reintentos?

Reintenta solo operaciones idempotentes, usa backoff exponencial con jitter y reintenta según categorías de error (por ejemplo: 429/5xx o fallos de red transitorios). Evita bucles de reintento para errores 4xx de validación.

¿Cuáles problemas cross-platform comunes has visto entre iOS y Android?

Diferencias en el comportamiento del teclado, flujos de permisos, rutas/permisos de archivos y almacenamiento, comportamiento de notificaciones, manejo de gestos y diferencias sutiles de layout/tipografía según la densidad de los dispositivos.

¿Qué enfoque limpio sigues para el código específico de plataforma en React Native?

Usa Platform.OS para diferencias pequeñas y aisladas, y mantén el código específico de plataforma en módulos/archivos separados cuando sea posible. Prefiere detección de features o checks de capacidades en lugar de revisar el OS de forma amplia.

¿Cómo mantienes la UI consistente entre dispositivos y tamaños de pantalla?

Usa patrones de layout relativos, evita asumir píxeles fijos, prueba en múltiples tamaños de pantalla y considera ajustes de accesibilidad como escalado dinámico de fuentes.

¿Cómo depurarías un problema de layout que solo ocurre en una plataforma?

Reproduce usando logging específico de plataforma, inspecciona el layout con RN dev tools, verifica el escalado de fuente y el manejo del área segura, y revisa diferencias en configuración nativa (barra de estado, notch, zona horaria, locale).

¿Qué estrategia de pruebas ayuda a detectar regresiones cross-platform?

Combina tests unitarios para lógica, tests de componente/integración para el comportamiento de la UI y tests end-to-end para flujos críticos en iOS y Android. Agrega comprobaciones visuales/snapshots cuando sea apropiado.

¿Cómo manejar HTTP 400 (Bad Request) en una app móvil?

Trátalo como un error de validación/entrada del cliente. Analiza errores a nivel de campo cuando estén disponibles, muestra mensajes adecuados en la UI y evita reintentar hasta que el usuario corrija la entrada.

¿Cómo manejas HTTP 401 (Unauthorized) y la caducidad del token?

Activa un flujo de refresh token cuando sea posible, reintenta la solicitud original una vez después del refresh y, si falla el refresh, redirige a login/logout y limpia credenciales inválidas.

¿Qué significan comúnmente 403, 404 y 409?

403 está relacionado con permisos, 404 es un recurso/ruta que no existe y 409 es un conflicto (a menudo conflicto de versión/estado). Asocia cada caso con una consecuencia clara para el usuario y la acción de recuperación correcta.

¿Qué significa HTTP 429 y cómo respondes?

Indica limitación de tasa (rate limiting). Aplica backoff usando lógica exponencial de retry-after, reduce la frecuencia de solicitudes y evita saturar la API.

¿Cómo manejas errores de servidor 5xx vs errores del lado del cliente?

5xx suele ser transitorio. Reintenta con backoff para operaciones seguras y muestra un mensaje genérico cuando no sea recuperable. 4xx normalmente requiere acción del usuario o una corrección en el código.

¿Qué deberías hacer cuando el error no es una respuesta HTTP (timeout, DNS, offline)?

Clasifica como fallo de red, muestra una opción offline/reintento y considera encolar operaciones para sincronizar más tarde en lugar de fallar de inmediato.