More in Mobile Dev — page 4
useMemo and useCallback for stable references
WHAT IT TESTS: Memoization hooks. OUTLINE: useMemo caches a computed value, useCallback caches a function identity across renders; both prevent recompute and unnecessary re-renders of memoized children.
Cost of console.log and production-safe debugging
WHAT IT TESTS: Debug logging cost. OUTLINE: each console.log serializes data and, when devtools are attached, crosses the bridge synchronously, blocking the JS thread; strip logs in release and use Flipper, dev tools, or remote crash and analytics tools.
FlatList and list virtualization
WHAT IT TESTS: Efficient long lists. OUTLINE: use FlatList (or SectionList) which virtualizes, rendering only items near the viewport and recycling as you scroll, unlike ScrollView which mounts everything. RED FLAG: putting a huge map of items in a ScrollView.
The JS thread and why it bottlenecks performance
WHAT IT TESTS: RN threading basics. OUTLINE: a single thread runs your JS, React reconciliation, and event handling; blocking it delays updates and gestures, and it is separate from the UI thread.
Streaming accelerometer data without bridge overload
WHAT IT TESTS: High-frequency data on the bridge. OUTLINE: the bottleneck is flooding the async bridge and re-rendering at sensor rate; fix by throttling, processing in worklets or native, and animating via shared values not setState.
Handling push notifications across app states
WHAT IT TESTS: State-aware notification handling. OUTLINE: foreground onMessage, background and quit setBackgroundMessageHandler and getInitialNotification, plus data-only messages and native background tasks like Background Fetch or Notification Service…
Building a custom native module
WHAT IT TESTS: Bridging native SDKs to JS. OUTLINE: write native classes in Kotlin/Java and Swift/Objective-C, expose methods via the module macros, register the module, and import via NativeModules with promises or events.
Managing camera lifecycle in Vision Camera
WHAT IT TESTS: Camera resource lifecycle. OUTLINE: bind the isActive prop to screen focus via useIsFocused and to app state, so the camera stops when blurred or backgrounded. RED FLAG: leaving isActive always true or unmounting instead of toggling isActive.
Background GPS tracking challenges and approaches
WHAT IT TESTS: Background execution constraints. OUTLINE: request always-allow permission, declare background modes, use a native background task or geofencing API rather than JS timers, manage battery and OS throttling.
Push notification data flow with APNs and FCM
WHAT IT TESTS: End-to-end push architecture. OUTLINE: device registers and gets a token, server sends to FCM, FCM routes to APNs for iOS and directly for Android, the OS delivers to the app. RED FLAG: thinking your server pushes straight to the device.
Getting a one-time GPS location
WHAT IT TESTS: One-shot location retrieval. OUTLINE: ensure permission, then call a getCurrentPosition wrapped in a promise (or Expo Location.getCurrentPositionAsync) with await inside try/catch, reading coords.latitude and longitude.
Requesting runtime permissions on iOS and Android
WHAT IT TESTS: Permission lifecycle awareness. OUTLINE: declare permissions in Info.plist and AndroidManifest, then check status and request at runtime just before use, handling granted, denied, and blocked.
Persisting key-value preferences across launches
WHAT IT TESTS: Local persistence choices. OUTLINE: AsyncStorage for simple non-sensitive key-value, MMKV for speed, SecureStore or Keychain for secrets. RED FLAG: storing tokens in AsyncStorage or treating its async API as synchronous.
Shared element transitions with Reanimated
WHAT IT TESTS: Cross-screen animated continuity. OUTLINE: wrap both views in Animated.View with the same sharedTransitionTag, use a native-stack navigator so Reanimated interpolates between source and target.
What is a worklet in Reanimated
WHAT IT TESTS: Reanimated's execution model. OUTLINE: a worklet is a JS function marked to run on the UI thread runtime with a captured snapshot of its scope, enabling synchronous per-frame work.
Animated.event for scroll-driven parallax
WHAT IT TESTS: Mapping native events to animated values. OUTLINE: Animated.event maps an event path to an Animated.Value, wire it to onScroll with useNativeDriver, then interpolate the value for header transform.
Shared values and useAnimatedStyle in Reanimated
WHAT IT TESTS: Reanimated core hooks. OUTLINE: useSharedValue holds a mutable .value readable on both threads, useAnimatedStyle derives styles as a worklet, mutate .value with withTiming or withSpring. RED FLAG: reading .value during render to set state.
Animated API versus Reanimated architecture
WHAT IT TESTS: Where animation work runs. OUTLINE: Animated declares animations that the native driver runs, but logic and gestures cross the bridge; Reanimated runs worklets directly on the UI thread. RED FLAG: saying both run fully on JS.
Animated.sequence versus Animated.parallel
WHAT IT TESTS: Composing multiple animations. OUTLINE: sequence runs animations one after another in order, parallel starts them at the same time. RED FLAG: thinking parallel waits for the slowest before others begin, or confusing them with stagger.
Build a mount fade-in with Animated API
WHAT IT TESTS: Basic Animated API fluency. OUTLINE: create an Animated.Value(0) in a ref, drive it with Animated.timing inside useEffect, bind it to opacity on Animated.View. RED FLAG: animating opacity via setState every frame.