React Native Interview Questions & Answers (2026)
These interviews test your grasp of React Native fundamentals, bridge concepts, performance optimization, and native integration. Demonstrate clear understanding of component lifecycle, navigation, styling, and debugging. Show practical experience with native modules, async storage, and testing. Emphasize trade‑offs, best practices, and real‑world problem solving to convince interviewers you can ship reliable mobile apps.
21 questions · updated Aug 29, 2026
Quick facts
| Typical rounds | Phone screen, coding challenge, system design, and on‑site deep dive |
| Core focus | JS/TS proficiency, native bridge, performance, and UI/UX patterns |
| Preferred experience | 2‑5 years building production React Native apps |
| Common tools | Expo, Metro, Redux/MobX, Jest, Flipper |
Questions
Beginner
What is the difference between a functional component and a class component in React Native?
Functional components are plain JavaScript functions that return JSX, while class components extend React.Component and manage state via this.state. Since React 16.8, hooks let functional components handle state, side effects, and lifecycle, making them more concise and easier to test. Interviewers expect you to explain that hooks replace most class lifecycle methods and that functional components improve readability and reduce boilerplate.
How does the React Native bridge work?
The bridge is an asynchronous, batched communication layer between JavaScript and native modules. JavaScript runs in a separate thread (JSCore or Hermes) and sends serialized messages over the bridge to native code, which executes UI updates on the main thread. This decoupling enables cross‑platform code but can cause performance bottlenecks if messages are too frequent. A strong answer mentions the bridge’s queue, serialization overhead, and the move toward TurboModules and Fabric to reduce latency.
Explain the purpose of the 'key' prop in lists.
The 'key' prop uniquely identifies each element in a list, allowing React Native to efficiently diff and reorder items without re‑rendering unchanged components. Using stable, unique keys (like IDs) prevents UI glitches and improves performance. Interviewers look for awareness that using index as a key can cause bugs when items are added, removed, or reordered, especially in animated lists.
What is the role of 'Flexbox' in React Native layout?
Flexbox provides a declarative way to arrange components in rows or columns, handling alignment, spacing, and distribution across different screen sizes. React Native uses a subset of CSS Flexbox, defaulting to column direction. Candidates should discuss properties like flex, justifyContent, alignItems, and how they replace absolute positioning for responsive designs.
How do you handle platform‑specific code?
React Native offers Platform.OS checks, .android/.ios file extensions, and the Platform.select helper. You can conditionally import native modules or style objects based on the OS. A good answer mentions keeping platform differences isolated, using shared abstractions, and testing both platforms to avoid runtime crashes.
What is the purpose of 'Flipper' in React Native development?
Flipper is a desktop debugging platform that provides plugins for inspecting React Native UI hierarchy, Redux state, network requests, and performance metrics. It connects via the React Native bridge, allowing real‑time inspection without rebuilding the app. Interviewers look for familiarity with its layout inspector and ability to diagnose UI bugs quickly.
Intermediate
What are 'TurboModules' and why are they important?
TurboModules are a new architecture that lazily loads native modules and communicates via JSI (JavaScript Interface) instead of the older bridge. They reduce serialization overhead, enable synchronous calls, and improve startup time. Interviewers expect you to compare TurboModules to classic bridge modules, noting benefits for performance‑critical apps and the need to migrate gradually.
Describe how you would implement deep linking in a React Native app.
Deep linking uses URL schemes or universal links to open specific screens. You configure app.json (or Info.plist/AndroidManifest) with the scheme, then use a navigation library (e.g., React Navigation) to map URLs to routes via linking config. A strong answer includes handling cold starts, parsing parameters, and fallback logic for unsupported links.
How do you optimize list performance for thousands of items?
Use FlatList or SectionList with proper keyExtractor, enable windowSize, initialNumToRender, and removeClippedSubviews. Implement getItemLayout for fixed-height rows to avoid layout calculations. Memoize row components with React.memo and avoid inline functions. Explain trade‑offs: larger windowSize improves scroll smoothness but uses more memory; getItemLayout eliminates measurement cost.
Explain the difference between 'useEffect' and 'useLayoutEffect' in React Native.
useEffect runs after the render is committed to the screen, suitable for side effects like data fetching. useLayoutEffect runs synchronously after DOM mutations but before the screen is painted, allowing you to measure layout or perform animations without flicker. Interviewers look for awareness of potential UI jank if heavy work is placed in useLayoutEffect.
What strategies do you use to debug memory leaks in a React Native app?
Profile with Xcode Instruments or Android Studio Profiler, watch for retained objects. Use Flipper’s React DevTools to inspect component hierarchies and ensure listeners, timers, or subscriptions are cleaned up in useEffect cleanup or componentWillUnmount. Explain common culprits like unremoved event listeners, large image caches, and improper use of global state.
How does 'React Navigation' differ from native navigation solutions?
React Navigation implements navigation in JavaScript, using the bridge to push native view controllers or activities. It offers declarative APIs, deep linking, and stack/tab/drawer patterns. Native solutions (e.g., UINavigationController) provide smoother transitions and lower overhead but require platform‑specific code. A solid answer highlights the trade‑off between cross‑platform flexibility and native performance, and when to consider native navigation modules.
Explain how to use 'React.memo' and 'useCallback' together to prevent unnecessary renders.
React.memo wraps a component and shallowly compares props to skip re‑renders. useCallback returns a memoized function reference, preventing new function instances on each render. Together, they ensure child components receive stable props and callbacks, reducing render churn. Mention that overusing them can add complexity and that profiling should guide their application.
Advanced
What is the purpose of the 'JSI' (JavaScript Interface) in React Native?
JSI is a C++ API that allows JavaScript code to call native functions synchronously without the bridge. It underpins TurboModules and the new Fabric renderer, enabling high‑performance UI updates and custom native modules. Interviewers expect you to discuss how JSI reduces serialization, improves latency, and requires careful memory management because calls are now on the same thread as JavaScript execution.
Explain how the new Fabric renderer improves UI performance.
Fabric replaces the old UIManager with a declarative, incremental layout system that batches view updates and sends them directly to the native UI thread via JSI. It reduces bridge traffic, enables synchronous layout, and supports concurrent rendering. Candidates should note that Fabric works best with functional components and that migration may require updating third‑party libraries that rely on the legacy UIManager.
How would you implement a native module to access a device‑specific sensor not covered by existing libraries?
Create a Java/Kotlin (Android) or Objective‑C/Swift (iOS) class extending ReactContextBaseJavaModule, expose @ReactMethod functions, and register the module in a package. Use JSI for synchronous calls if low latency is needed. Ensure proper threading, handle permissions, and provide a JavaScript wrapper that returns Promises. Discuss testing via Jest mocks and native unit tests.
What are the trade‑offs between using Expo managed workflow versus a bare React Native project?
Expo managed workflow offers fast setup, OTA updates, and built‑in APIs, but limits native code customization and may increase app size. Bare projects give full control over native modules, enabling custom SDKs and better performance, but require Xcode/Android Studio knowledge and longer build times. Interviewers look for a balanced view: choose Expo for rapid prototyping, switch to bare when native features or fine‑grained performance tuning are required.
How does Hermes improve JavaScript execution in React Native?
Hermes is an open‑source JavaScript engine optimized for React Native. It compiles JS to bytecode ahead‑of‑time, reducing app startup time and memory footprint. It also provides better garbage collection and profiling tools. A good answer mentions that Hermes is optional, works best with RN 0.60+, and may have compatibility considerations for certain third‑party libraries that rely on JSC quirks.
Describe how you would handle offline data synchronization in a React Native app.
Use a local persistence layer such as AsyncStorage, SQLite, or Realm to store changes while offline. Queue mutations and replay them when connectivity restores, handling conflicts via versioning or server‑side merge logic. Implement NetInfo listeners to trigger sync, and provide UI feedback. Emphasize idempotent APIs and conflict resolution strategies to avoid data loss.
What is the difference between 'useRef' and 'createRef' in React Native?
createRef creates a new ref object on each render, suitable for class components or one‑time assignments. useRef returns a stable mutable object that persists across renders, ideal for functional components to store DOM nodes or mutable values without causing re‑renders. Interviewers expect you to explain why useRef is preferred for performance and how it can hold animation values or timers.
How would you profile and improve JavaScript thread performance in a large React Native app?
Enable Hermes profiling or use Chrome DevTools to record CPU timelines. Identify long‑running tasks, heavy loops, or excessive re‑renders. Optimize by memoizing components, splitting work with InteractionManager, moving heavy calculations to native modules or Web Workers, and debouncing expensive callbacks. Explain the impact of reducing bridge traffic and using JSI for critical paths.
Common mistakes
- Using index as key in FlatList, causing UI glitches on reorder
- Neglecting cleanup in useEffect, leading to memory leaks
- Over‑relying on bridge calls instead of TurboModules for performance‑critical paths
- Mixing platform‑specific code without proper guards, causing crashes on the opposite OS
- Skipping profiling; assuming code works without measuring startup or JS thread time
Study plan
- Review core concepts: components, hooks, navigation, and styling; build a small sample app.
- Deep dive into bridge, TurboModules, and JSI; read official RN docs and experiment with a native module.
- Practice performance optimization: profile with Flipper, implement FlatList optimizations, and test Hermes vs JSC.
- Master debugging and offline strategies: use NetInfo, AsyncStorage, and error boundaries.
- Mock interview: answer 20+ questions aloud, focusing on trade‑offs and real‑world examples.
FAQ
Do I need to know native Android/iOS code for a React Native interview?
Understanding native modules, bridge concepts, and basic platform APIs is important, but most questions focus on JavaScript patterns and performance. Be ready to discuss how you’d write a native module or handle platform‑specific UI, showing that you can bridge the gap when needed.
How important is knowledge of Expo for React Native roles?
Expo is common for rapid prototyping, so familiarity helps. However, many companies use bare React Native for custom native features. Highlight both: your ability to work within Expo’s managed workflow and to eject or integrate native code when required.
What are the most common performance pitfalls in React Native?
Frequent bridge calls, large lists without virtualization, unoptimized images, and unnecessary re‑renders are typical culprits. Use profiling tools, memoization, and native modules to mitigate these issues.
Should I study Redux or can I use other state management libraries?
Redux remains widely used, but interviewers accept alternatives like MobX, Recoil, or Zustand. Demonstrate solid state‑management fundamentals, explain why you chose a library, and show how you handle async actions and persistence.
How much emphasis is placed on testing in React Native interviews?
Testing is a key differentiator. Expect questions on unit testing with Jest, component testing with React Native Testing Library, and end‑to‑end testing with Detox. Show how you write reliable tests and integrate them into CI pipelines.
Related
Ready for your next interview?
Download MiPrep AI. Load your resume and the job description. Show up ready.
Free tier · No credit card · macOS 14+ · Windows 10+
Free tier · No credit card · Runs on your Mac or Windows machine