React Native Research & Evidence-Based Practice 2 — Questions and Answers
Question 1: Which tool does the React Native team officially recommend for measuring JavaScript thread performance in production apps?
- Flipper Performance Plugin
- React Native Perf Monitor (in-app overlay) (Correct answer)
- Chrome DevTools Timeline
- Android Profiler via ADB
Correct answer: React Native Perf Monitor (in-app overlay)
The built-in in-app Performance Monitor (shake menu → Show Perf Monitor) is the officially recommended first-line tool for measuring JS and UI thread FPS in production-like conditions.
Question 2: Research consistently shows that unnecessary re-renders are a top cause of React Native jank. Which hook is the primary evidence-based solution for memoizing expensive child components?
- useCallback
- useMemo
- React.memo (Correct answer)
- useReducer
Correct answer: React.memo
React.memo wraps a component and shallowly compares props, preventing re-renders when props have not changed, which is the standard evidence-based fix for unnecessary child re-renders.
Question 3: According to React Native documentation and community benchmarks, which bridge-related architecture improvement was introduced to eliminate serialization overhead?
- Fabric Renderer
- TurboModules
- JSI (JavaScript Interface) (Correct answer)
- Hermes engine
Correct answer: JSI (JavaScript Interface)
JSI (JavaScript Interface) allows JavaScript to hold direct references to C++ host objects, eliminating the JSON serialization overhead of the old async bridge.
Question 4: A team wants evidence-based guidance on whether to use FlatList or ScrollView for a list of 500+ items. What does research on React Native memory usage recommend?
- ScrollView, because it pre-renders all items reducing scroll jitter
- FlatList, because it virtualizes the list and only renders visible items (Correct answer)
- SectionList, because it groups items reducing total component count
- VirtualizedList directly, because FlatList adds unnecessary abstraction
Correct answer: FlatList, because it virtualizes the list and only renders visible items
FlatList uses virtualization to keep only visible items in memory, which is the evidence-backed approach for long lists to prevent out-of-memory crashes.
Question 5: Studies on React Native app startup time show that switching to which JavaScript engine can reduce TTI (Time to Interactive) by up to 2× on Android?
- V8
- SpiderMonkey
- Hermes (Correct answer)
- JavaScriptCore
Correct answer: Hermes
Hermes, Meta's purpose-built JS engine for React Native, pre-compiles JavaScript to bytecode at build time, dramatically reducing parse time and TTI on Android.
Question 6: Evidence from production React Native apps shows that image performance is improved most by which practice when using large lists?
- Using <Image> with resizeMode='contain' on every item
- Caching images with a library like react-native-fast-image (Correct answer)
- Loading all images eagerly at app startup
- Storing images as base64 strings in state
Correct answer: Caching images with a library like react-native-fast-image
react-native-fast-image uses native image caching strategies (memory + disk) that the default <Image> component lacks, significantly reducing redundant network requests and decode overhead.
Question 7: When investigating a React Native crash in production, which tool provides symbolicated stack traces from minified JavaScript bundles?
- Metro Bundler logs
- Flipper crash reporter
- Sentry with source maps uploaded at build time (Correct answer)
- Xcode Instruments
Correct answer: Sentry with source maps uploaded at build time
Sentry (or similar services like Bugsnag) can accept source maps uploaded during CI to symbolicate production crash traces back to original source lines.
React Native Research & Evidence-Based Practice 2
Which tool does the React Native team officially recommend for measuring JavaScript thread performance in production apps?