Advanced React Native Technical Quiz Quiz

Challenge your expertise with 15 advanced React Native questions and answers. This hard-level quiz covers core concepts like performance, memory leaks, FlatList, SSL pinning, and component management, making it ideal for experienced developers preparing for technical interviews.

1. React Native Thread Communication Bottleneck

   Which primary factor leads to performance bottlenecks in React Native applications, especially when dealing with thread communication?

   1. Unoptimized image assets
   2. Heavy reliance on functional components
   3. Limited use of JavaScript ES6 features
   4. Excessive data passing between JS and Native threads

   Explanation: The main performance bottleneck in React Native arises from frequent or excessive data passing between the JavaScript and Native threads, which happens via the bridge. This process is costly and slows down interactions. Limited ES6 usage and reliance on functional components are not direct causes of this bottleneck. Unoptimized images may affect rendering but do not directly relate to thread communication.

2. Detecting Memory Leaks in iOS

   During iOS development with React Native, which tool is used to detect memory leaks most effectively?

   1. Android Device Monitor
   2. Safari Web Inspector
   3. Xcode Instrument's Leaks tool
   4. React Native Debugger

   Explanation: On iOS, memory leaks are commonly detected using the Leaks tool within Xcode Instruments, which specifically highlights where memory is not properly released. Safari Web Inspector helps with web debugging, Android Device Monitor is for Android, and React Native Debugger is for JavaScript debugging, not direct memory analysis.

3. Comparing FlatList and ScrollView

   What is the primary advantage of using FlatList over ScrollView for large data sets in React Native?

   1. ScrollView supports pagination natively
   2. FlatList can only display text but not images
   3. FlatList renders only visible items, improving performance
   4. FlatList works only in vertical orientation

   Explanation: FlatList optimizes rendering by displaying only items visible on the screen, making it highly efficient with large lists. ScrollView, in contrast, renders all children at once, which can degrade performance. FlatList supports both orientations and can render various item types, not just text. Pagination support and image rendering are possible in both.

4. SSL Pinning Fundamentals

   Why is SSL pinning recommended in React Native mobile apps?

   1. To decrease app bundle size
   2. To prevent man-in-the-middle attacks by validating certificates
   3. To improve image loading speed
   4. To eliminate the need for JavaScript bridges

   Explanation: SSL pinning links trusted certificates or public keys with an endpoint to prevent man-in-the-middle attacks during communication. It does not relate to bundle size, JS bridges, or image performance. The other options misrepresent the goal of SSL pinning.

5. Controlled vs. Uncontrolled Components

   How does a controlled component differ from an uncontrolled one in React Native?

   1. Uncontrolled components cannot have user input
   2. Controlled components never re-render
   3. Uncontrolled components require Redux
   4. The value of a controlled component is managed by React state

   Explanation: A controlled component uses React state to manage its input value, while uncontrolled components manage their own state internally. Both types support user input, and neither inherently requires Redux. Controlled components may re-render often based on state changes.

6. Memory Leak Source Identification

   Which coding mistake most commonly causes memory leaks in React Native?

   1. Using functional components for UI
   2. Relying solely on useMemo hook
   3. Not cleaning up event listeners in componentWillUnmount
   4. Excessive use of PropTypes

   Explanation: Failing to remove listeners or timers during unmounting can result in memory that is never freed, causing leaks. Functional components and PropTypes are not directly related to leaks, and useMemo, while misused, does not typically result in memory leaks if cleaned up appropriately.

7. Bridge and Rendering Performance

   Why should developers minimize the number of passes over the React Native bridge?

   1. Bridge passes help garbage collection
   2. More passes lead to automatic code splitting
   3. Frequent passes add communication overhead, causing lag
   4. Minimizing passes disables touch events

   Explanation: Each transfer over the React Native bridge introduces latency and processing cost, creating noticeable lags. Passes do not facilitate garbage collection, have no effect on code splitting, and do not disable touch events. The other options describe incorrect effects.

8. Detecting Memory Issues on Android

   Which toolset is typically used to identify memory leaks in React Native apps on Android devices?

   1. Xcode Instruments
   2. npm audit
   3. Android Device Monitor and Profiler tools
   4. Chrome Developer Tools

   Explanation: Android Device Monitor along with Profiler tools are standard for analyzing memory usage and leaks on Android. Chrome tools are tailored for web, Xcode is for iOS, and npm audit checks dependencies for vulnerabilities but not runtime memory leaks.

9. FlatList Optimization Techniques

   Which prop should be set in FlatList for better performance when each item has a fixed height?

   1. keyboardShouldPersistTaps
   2. scrollEnabled
   3. getItemLayout
   4. extraData

   Explanation: Setting the getItemLayout prop allows FlatList to compute positions and skip measurement calculations, making scrolling more efficient with uniform item heights. extraData is used for re-render control, scrollEnabled toggles scrolling, and keyboardShouldPersistTaps relates to keyboard interactions.

10. React Native Component Lifecycle

    In a class component, which lifecycle method is best suited for unsubscribing from timers or listeners to prevent leaks in React Native?

    1. componentWillUnmount
    2. componentDidMount
    3. componentDidCatch
    4. shouldComponentUpdate

    Explanation: componentWillUnmount is specifically designed for clean-up tasks like removing timers or listeners, preventing leaks. componentDidMount handles setup, shouldComponentUpdate determines re-rendering, and componentDidCatch deals with error boundaries, not clean-up.

11. Certificate Pinning Failure Impact

    What happens if the pinned certificate or public key changes unexpectedly in SSL pinning within a React Native app?

    1. The app will downgrade to HTTP
    2. The app will silently connect anyway
    3. The app will display all app data in plaintext
    4. The app will reject the connection to the server

    Explanation: When the pinned certificate or key changes, SSL pinning mechanisms block the connection to prevent security risks. The connection is not silently accepted, and network protocols are not downgraded. App data remains secure; it will not be shown in plaintext due to a pinning mismatch.

12. Handling Large Lists

    What is a direct consequence of using ScrollView instead of FlatList for long lists with thousands of items?

    1. Improved battery efficiency
    2. ScrollView automatically paginates data
    3. Antialiased text rendering improves
    4. Excessive memory usage due to rendering all items at once

    Explanation: ScrollView renders all items in memory, which with thousands of elements can lead to high memory and poor performance. It does not enhance battery efficiency or text antialiasing, nor does it support automatic pagination.

13. JavaScript Memory Management

    Which aspect of JavaScript garbage collection can unintentionally cause memory leaks in React Native?

    1. References kept in closure scopes
    2. Having too many inline styles
    3. Using only stateless components
    4. Importing large assets

    Explanation: Variables referenced by closures may persist even after being logically unused, preventing garbage collection and causing leaks. Stateless components and inline styles are not linked to leaks, and importing large assets mainly affects loading time, not garbage collection.

14. Uncontrolled Component Risks

    Why might relying solely on uncontrolled components in React Native lead to unpredictable input behavior?

    1. They force rerender on every keystroke
    2. They use Native threads exclusively
    3. Their values are not managed by React state, so external updates aren't tracked
    4. Uncontrolled components must be wrapped in useCallback

    Explanation: Uncontrolled components manage their own state, making it difficult for React to keep track of changes triggered externally. They do not force constant rerender, and there's no exclusive threading or useCallback requirement for using them.

15. Bridge Communication Example

    If a React Native app frequently animates hundreds of elements by updating their properties from JavaScript, what performance issue is likely to occur?

    1. Native modules becoming unregistered
    2. Instant animation with no lag
    3. Bridge saturation due to excessive property updates
    4. Memory leak caused by static asset loading

    Explanation: Updating many properties on the JS side for animation causes frequent passes over the bridge, quickly saturating it and causing animation lag. Instant animations are unlikely, static asset loading does not cause this type of lag, and native module registration is unrelated.