Junior React Native Developer — Preguntas de entrevista React Native

¿Qué es un componente en React Native, y cuál es la diferencia entre un componente funcional y uno de clase?

Un componente es un pedazo reutilizable de UI, escrito como una función (o, históricamente, una clase) que devuelve JSX describiendo qué renderizar. Los componentes funcionales con hooks son la norma hoy — se leen más limpios, evitan problemas de binding con this, y pueden reutilizar lógica con estado entre componentes vía hooks personalizados de una forma que los métodos de ciclo de vida de clase no permitían. Los componentes de clase todavía funcionan y aparecen en bases de código antiguas, pero el código nuevo es funcional por defecto.

¿Cuál es la diferencia entre props y state?

Props vienen del padre y el componente no puede cambiarlos — trátalos como entrada de solo lectura. State pertenece al propio componente, se crea con useState, y cambiarlo dispara un re-render. El texto de un botón suele ser un prop; si un modal está abierto actualmente suele ser state.

¿Qué hace `useEffect`?

Ejecuta una función después de que el componente se renderiza, para todo lo que no sea renderizado puro — traer datos, suscribirse a un evento, poner un timer. El array de dependencias controla cuándo se vuelve a ejecutar, y una función de limpieza devuelta desde él se encarga de desuscribirse antes de la siguiente ejecución o al desmontar. Omitir el array de dependencias significa que el efecto se ejecuta después de cada render, lo cual rara vez es lo que se quiere.

¿Cómo estilizas un componente en React Native?

Con un objeto JS, normalmente construido vía StyleSheet.create({...}) y pasado al prop style — no hay un archivo CSS separado. El layout usa Flexbox por defecto con flexDirection: 'column', así que flex: 1, justifyContent y alignItems son las propiedades más usadas para organizar los hijos. StyleSheet.create también permite a React Native validar estilos y referenciarlos por ID en vez de recrear un objeto en cada render.

¿Cómo te mueves entre pantallas con React Navigation?

Envuelve la app en un navegador — normalmente un stack navigator para el patrón común de push/pop —, registra cada pantalla con un nombre, y llama a navigation.navigate('ScreenName') desde dentro de una pantalla para moverte a ella. Los parámetros viajan con la llamada, navigation.navigate('Details', { id: 5 }), y la pantalla destino los lee de vuelta con route.params. Volver atrás usa navigation.goBack() o el gesto/botón de atrás propio de la plataforma, que el stack navigator conecta automáticamente.

¿En qué se diferencia React Native de React para la web?

No hay DOM ni navegador — <View>, <Text> e <Image> reemplazan a <div>, <span> e <img>, y renderizan a vistas nativas reales de UIKit/Android en lugar de elementos HTML. Los estilos son objetos JS en vez de CSS, no hay className, y APIs del navegador como localStorage no existen — React Native tiene sus propios equivalentes como AsyncStorage. El modelo de componentes, los hooks y el flujo de datos unidireccional son, por lo demás, el mismo modelo mental que React en la web.