Mobile App Development Cross-Platform Development Flashcards

24 sample cards from the Cross-Platform Development deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. In React, what problem does the Context API solve and how is it used?

   Context avoids prop drilling by sharing values (theme, user, locale) across the tree without passing props at every level. You create a context with createContext, wrap the tree in a <Context.Provider value={...}>, and read it in descendants with useContext(Context).

2. In React, what is a key limitation of Context regarding re-renders?

   When a Context Provider's value changes, all consuming components re-render, even if they only use part of the value. Context is not optimized for high-frequency updates; for that, split contexts, memoize the value, or use a dedicated state library like Redux/Zustand.

3. What is Redux, and what are its three core principles?

   Redux is a predictable state container. Principles: (1) single source of truth — one immutable store holds all state; (2) state is read-only — you change it only by dispatching actions; (3) changes are made with pure reducer functions (state, action) => newState. Redux Toolkit is the recommended modern implementation.

4. In Redux, describe the unidirectional data flow of an action.

   A component dispatches an action (a plain object with a type). The store passes the current state and action to the reducer, which returns a new state. Subscribed components then re-render with the updated store state. Data flows one way: dispatch → reducer → store → view.

5. What is React Query (TanStack Query), and what problem does it solve?

   React Query manages server state: fetching, caching, synchronizing, and updating asynchronous data. It handles caching, background refetching, deduplication, and loading/error states declaratively, removing the need to store server data manually in Redux/useState and reducing boilerplate for data fetching.

6. In React Query, what is the difference between useQuery and useMutation?

   useQuery is for reading/fetching data; it caches by a queryKey and returns data, isLoading, error, and refetch. useMutation is for creating/updating/deleting data (side-effecting writes); it returns a mutate function and can invalidate queries on success to trigger refetches.

7. In React Query, what do staleTime and cacheTime (gcTime) control?

   staleTime is how long fetched data is considered fresh; while fresh, no background refetch occurs. cacheTime/gcTime is how long inactive (unused) query data stays in cache before garbage collection. Larger staleTime reduces network calls; gcTime governs memory retention of unmounted queries.

8. In Flutter, what is a Platform Channel and what is its purpose?

   A Platform Channel is the mechanism for communication between Dart code and native platform code (Kotlin/Java on Android, Swift/Objective-C on iOS). It lets Flutter invoke platform-specific APIs not covered by the framework by passing asynchronous messages across the boundary.

9. In Flutter, what are the differences between MethodChannel, EventChannel, and BasicMessageChannel?

   MethodChannel invokes discrete named methods and returns a single async result (request/response). EventChannel streams a continuous sequence of events from native to Dart (e.g. sensor updates). BasicMessageChannel passes arbitrary structured messages both ways using a codec. All identify by a unique channel name string.

10. In Flutter Platform Channels, how is data serialized across the boundary?

    Data is serialized using a message codec (default StandardMessageCodec), which supports primitives, strings, byte buffers, lists, and maps. Calls are asynchronous; Dart awaits a Future while the native side handles the call on its main thread and sends back a result, error, or notImplemented.

11. In React Native, what is a Native Module?

    A Native Module is native code (Java/Kotlin or Objective-C/Swift) exposed to JavaScript, letting JS call platform APIs or reuse existing native libraries. You register methods that JS can invoke; results are returned via callbacks, Promises, or events across the bridge.

12. In React Native, what is the New Architecture's replacement for the bridge, and what are TurboModules and Fabric?

    The New Architecture replaces the asynchronous JSON bridge with the JSI (JavaScript Interface), allowing synchronous, direct JS-to-native calls. TurboModules are the new lazily-loaded native modules using JSI; Fabric is the new rendering system. Codegen generates type-safe interfaces from JS spec files.

13. In React Native, how are values returned from a native module method to JavaScript?

    Native module methods can return results via callbacks (success/error functions), via Promises (the JS call awaits, native resolves/rejects), or by emitting events through an event emitter for asynchronous/streaming data. Promises are typical for one-shot async results.

14. How do cross-platform apps typically access device APIs like camera, GPS, or sensors?

    Through plugins/packages that wrap native platform APIs behind a unified Dart/JS interface (e.g. Flutter's camera, geolocator, sensors_plus; React Native's / Expo's expo-camera, expo-location). These handle the platform channel/native module bridging and expose a cross-platform API.

15. On mobile, why must sensitive device APIs request runtime permissions, and how is this handled cross-platform?

    APIs like camera, location, and contacts access private data, so iOS and Android require explicit user consent at runtime (and manifest/Info.plist declarations). Cross-platform apps use permission libraries (permission_handler in Flutter, expo-permissions/PermissionsAndroid in RN) to request and check permission status before accessing the API.

16. For device location, what is the difference between coarse and fine location, and why choose one?

    Coarse location (network/Wi-Fi based) gives approximate position with lower battery cost and a less intrusive permission; fine location (GPS) gives precise coordinates but uses more power. Choose coarse when only general area is needed to save battery and improve privacy; use fine only when precision is essential.

17. In Flutter, why can excessive or deep widget rebuilds hurt performance, and how do you mitigate them?

    Rebuilding large subtrees on every setState wastes CPU and can cause jank. Mitigations: use const constructors so unchanged widgets are cached, split widgets so setState scopes are small, use keys correctly, and use targeted state (Selector/select, ValueListenableBuilder) to rebuild only what changed.

18. In Flutter, what is the purpose of const constructors for performance?

    A const widget is instantiated once at compile time and reused; Flutter can skip rebuilding and re-comparing it because its identity never changes. Marking static subtrees const reduces allocations and rebuild work, improving frame times.

19. In React/React Native, how do React.memo, useMemo, and useCallback improve performance?

    React.memo skips re-rendering a component when its props are shallowly equal. useMemo caches an expensive computed value between renders. useCallback caches a function reference so memoized children don't re-render due to a new function identity each render. All prevent unnecessary work when dependencies are unchanged.

20. In React Native, why use FlatList/SectionList instead of mapping items in a ScrollView?

    FlatList and SectionList virtualize the list, rendering only items near the viewport and recycling views, which keeps memory and render cost low for large datasets. A ScrollView with .map renders every item at once, causing high memory use and jank for long lists.

21. What is the target frame rate for smooth mobile UI, and what is the per-frame time budget?

    Smooth UI targets 60 frames per second (or 120fps on high-refresh displays). At 60fps the budget per frame is $\frac{1000\ \text{ms}}{60} \approx 16.7\ \text{ms}$; exceeding it drops frames and causes visible jank. All build, layout, and paint work must fit within that budget.

22. In React Native's old architecture, why could bridge traffic cause performance problems?

    The old bridge serializes all JS-native communication as batched, asynchronous JSON messages. High-frequency traffic (e.g. per-frame scroll or animation updates) creates serialization overhead and a bottleneck, causing dropped frames. Solutions include using native driver animations (useNativeDriver: true) and the JSI-based New Architecture.

23. In cross-platform animation, why is running animations on the native/UI thread (e.g. useNativeDriver) important?

    Running animations on the native UI thread lets them continue smoothly even when the JavaScript thread is busy, avoiding jank from blocked JS. useNativeDriver: true in React Native (and Flutter's own native rendering) offloads animation from the JS/business logic thread to keep a steady frame rate.

24. In cross-platform development, what is the general tradeoff between Flutter's rendering approach and React Native's?

    Flutter draws its own widgets via the Skia/Impeller engine, giving pixel-consistent UI across platforms independent of native controls. React Native renders actual native components, giving a more platform-native look and feel but with potential inconsistencies and bridge overhead. Flutter favors consistency; RN favors native fidelity.

What this deck covers

Cross-Platform Development flashcards FAQ