React Native Case Studies & Practical Application 2 — Questions and Answers
Question 1: A social media app needs to display an infinite feed of posts with images. Which component combination is most appropriate?
- ScrollView with nested Image components
- FlatList with optimized keyExtractor and getItemLayout (Correct answer)
- SectionList with a single section
- VirtualizedList with manual windowing logic
Correct answer: FlatList with optimized keyExtractor and getItemLayout
FlatList with keyExtractor and getItemLayout enables efficient recycling and avoids measuring overhead for uniform-height rows.
Question 2: A food delivery app must show the user's live location on a map updating every 3 seconds. What is the best approach?
- Call Geolocation.getCurrentPosition inside a setInterval
- Use Geolocation.watchPosition and update state on each callback (Correct answer)
- Fetch location from a REST API every 3 seconds
- Use BackgroundFetch to poll location in a background task
Correct answer: Use Geolocation.watchPosition and update state on each callback
watchPosition streams continuous location updates and is more battery-efficient than polling with setInterval.
Question 3: An e-commerce checkout screen freezes briefly when calculating order totals. The calculation is CPU-intensive. What is the recommended fix?
- Move the calculation to a useEffect with an empty dependency array
- Wrap the calculation in useMemo so it only recomputes when inputs change
- Run the calculation in a native module on a background thread (Correct answer)
- Use InteractionManager.runAfterInteractions to defer it
Correct answer: Run the calculation in a native module on a background thread
CPU-intensive JavaScript work should be offloaded to a native module's background thread to keep the JS thread free for UI updates.
Question 4: A messaging app stores thousands of chat messages locally. Which storage solution handles relational queries and large datasets best?
- AsyncStorage with JSON serialization
- SQLite via a library like react-native-quick-sqlite (Correct answer)
- MMKV for key-value storage
- Realm with a document model
Correct answer: SQLite via a library like react-native-quick-sqlite
SQLite supports structured relational queries, indexes, and handles large datasets efficiently without loading everything into memory.
Question 5: A news app shows articles with HTML content received from an API. What is the safest way to render this content?
- Use dangerouslySetInnerHTML inside a Text component
- Render with a WebView using the html prop and origin whitelist (Correct answer)
- Parse the HTML string manually and render Text components
- Store the HTML in AsyncStorage and fetch it with a script tag
Correct answer: Render with a WebView using the html prop and origin whitelist
WebView with a restricted originWhitelist safely sandboxes HTML rendering without exposing the app to script injection.
Question 6: A fitness app needs to continue tracking a workout even when the user locks their phone. Which API enables this on both platforms?
- AppState API with 'background' listener
- BackgroundFetch with a 15-minute minimum interval
- Headless JS on Android and Background Modes on iOS (Correct answer)
- PushNotificationIOS for silent push-triggered updates
Correct answer: Headless JS on Android and Background Modes on iOS
Headless JS (Android) combined with iOS Background Modes allows long-running background tasks on both platforms.
Question 7: A travel app renders a list of 500 destination cards, each with a complex nested layout. Users report janky scrolling. What is the first optimization to apply?
- Increase the windowSize prop of FlatList
- Wrap each card in React.memo to prevent unnecessary re-renders (Correct answer)
- Switch from FlatList to ScrollView for simpler code
- Reduce the initialNumToRender to 1
Correct answer: Wrap each card in React.memo to prevent unnecessary re-renders
React.memo prevents child card components from re-rendering when parent state changes, reducing work on the JS thread during scroll.
React Native Case Studies & Practical Application 2
A social media app needs to display an infinite feed of posts with images.
Which component combination is most appropriate?