This guide is part of a 719-question React Native interview handbook collected from real interviews across startups, product companies, fintech, e-commerce, and MNCs. Questions range from beginner to senior (5+ years) and cover JavaScript, React Native, New Architecture, performance, security, native modules, iOS, Android, system design, and behavioral interviews.
This article contains 100 questions (global questions 121–220). Answer each question before reading the response, explain assumptions and complexity for coding questions, and adapt behavioral examples to your truthful experience.
Difficulty guide
- 🟢 Beginner — expected for entry-level and junior React Native roles.
- 🟡 Intermediate — expected for engineers who can independently ship features.
- 🔴 Senior — tests architecture, trade-offs, production ownership, and native-platform knowledge.
Topics in this part
- React Fundamentals — questions 13–15
- React Hooks — 19 questions
- React Compiler & Future React — 5 questions
- React Native Basics — questions 1–73
Complete series
This Dev.to series has five core handbook articles plus five focused practice extras. Open the series page to move through the complete reading order:
- Part 1: JavaScript — core handbook, questions 1–120
- Part 2: React — core handbook, questions 121–220
- Part 3: React Native — core handbook, questions 221–420
- Part 4: Performance & Architecture — core handbook, questions 421–560
- Part 5: Senior & System Design — core handbook, questions 561–719
- Part 6: Output-Based JavaScript Practice — bonus practice article
- Part 7: Coding Interview Practice — bonus practice article
- Part 8: Code Output Challenges — bonus practice article
- Part 9: Current React Native Interview Questions — new high-frequency practice article
- Part 10: Project & Production Interviews — senior project ownership and real-production practice
Series navigation
Use the Complete React Native Interview Handbook 2026 series page on Dev.to to open every part in order.
Follow-up questions interviewers ask
What is useMemo?
useMemo caches a computed value while its dependencies remain equal. It is useful only when profiling shows that avoiding the calculation or stabilizing a dependency is worth the memoization cost.
Follow-up questions:
- When should you avoid
useMemo? - How does
useMemodiffer fromReact.memoanduseCallback? - Can an incorrect dependency list create stale values?
- Can memoization hurt performance?
Answer: Yes. Dependency comparison, allocation, and maintenance have a cost. Prefer the simplest correct implementation until measurement identifies a real bottleneck.
Continuation note
This part continues React Fundamentals from Part 1 and ends midway through React Native Basics.
Question bank
13. What are Actions in React 19, and when are they useful?
Example:Answer
Answer: An Action is an async transition used for a data mutation and the state changes around it. React manages pending state, optimistic updates, errors, and form reset behavior around the Action. In React Native, the same pattern can coordinate an async save or submission, but React DOM form actions and progressive enhancement remain web-specific. In React Native, availability follows the React version bundled by the chosen React Native release, so I verify that toolchain before using the API.
const [error, submitAction, pending] = useActionState(
async (_, form) => {
await updateProfile(form);
return null;
},
null,
);
14. What does the use API do in React 19?
Example:Answer
Answer: The use API reads a resource such as a Promise or context during render. When it reads a pending Promise, rendering suspends to the nearest Suspense boundary; rejection reaches the nearest error boundary. Unlike hooks, use can be called conditionally, but the resource must be stable rather than recreated on every render. In React Native, availability follows the React version bundled by the chosen React Native release, so I verify that toolchain before using the API.
<Text>{profile.name}</Text>;
}
15. What problem does useOptimistic solve in React 19?
Example:Answer
Answer: useOptimistic lets the UI show the expected result of an Action before the server confirms it. React returns to the authoritative value when the Action completes, so the application still needs a failure message or rollback policy. Use it only when the optimistic result is safe and conflicts can be reconciled. In React Native, availability follows the React version bundled by the chosen React Native release, so I verify that toolchain before using the API.
const [optimisticLikes, addLike] = useOptimistic(likes, count => count + 1);
// Update immediately, then run the network mutation.
React Hooks
19 reviewed questions.
🟢 Beginner
1. What are custom hooks?
Answer
Answer: A custom hook is a function beginning with use that composes hooks to reuse stateful behavior rather than UI.
2. What is useEffect and when does it run?
Answer
Answer: useEffect runs side effects after render — API calls, subscriptions, timers. With no dependency array it runs after every render. With [] it runs on mount and cleans up on unmount. With [a,b] it re-runs when those values change. I always return a cleanup function for timers, listeners, and AbortController.
3. What is useRef?
Example:Answer
Answer: useRef keeps a mutable current value across renders without scheduling a re-render. It suits timers, imperative handles, previous values, and latest-callback patterns.
const timer = useRef(null);
🟡 Intermediate
4. All important refs: useRef, createRef, forwardRef, callback ref, and useImperativeHandle?
Example:Answer
Answer: useRef returns a stable object across function renders and changing current does not re-render. createRef creates a new ref and is mainly for classes; calling it inside a function render would create a new ref each time. forwardRef lets a parent pass a ref through a custom component. A callback ref runs when the node attaches or detaches. useImperativeHandle limits the methods exposed through a forwarded ref.
<TextInput ref={inner} {...props} />;
});
5. Explain the useEffect lifecycle?
Example:Answer
Answer: An effect runs after commit; before rerunning or unmounting, React invokes its previous cleanup. Dependencies control when the subscription is replaced.
useEffect(() => subscribe(), [id]);
6. HOC vs render props vs custom hooks — which do you prefer?
Example:Answer
Answer: A HOC takes a component and returns an enhanced component. Render props pass a function that decides what to render. Custom hooks reuse stateful logic without adding wrapper components. I prefer custom hooks for new function-component code because they avoid wrapper hell; I use HOCs for cross-cutting component behavior or legacy libraries and render props when the caller must control rendering.
<ActivityIndicator /> : <Component {...props} />;
function useLoadingTask(task) { /* reusable state logic */ }
7. How do you prevent infinite useEffect loops?
Answer
Answer: Use correct dependencies and guards, avoid unstable literals in dependency arrays, prefer functional updates where appropriate, and ensure an effect does not unconditionally update its own dependency.
8. How does useState work internally?
Answer
Answer: Hooks are stored by call order on a Fiber. useState reads a hook slot and update queue; its setter enqueues work and schedules another render.
9. What custom hooks are commonly asked, and how do they differ?
Answer
Answer: useDebounce waits until values stop changing; useThrottle limits update frequency; usePrevious remembers the prior render; useFetch or useApi manages request state; usePagination manages page and load-more; useNetworkStatus exposes connectivity; useAppState exposes foreground/background state; useInterval and useTimeout manage timers; useAuth centralizes session logic; useForm manages validation. A custom hook reuses behavior, while a component reuses UI.
10. What does useCallback do?
Example:Answer
Answer: useCallback preserves a function reference until dependencies change, which can help a memoized child or subscription boundary.
const onPress = useCallback(() => select(id), [id]);
11. What does useMemo do?
Example:Answer
Answer: useMemo caches a computed value until a dependency changes.
const sorted = useMemo(() => sort(items), [items]);
12. What is the difference between useEffect and useLayoutEffect?
Answer
Answer: useEffect runs after paint and suits data or subscriptions. useLayoutEffect runs synchronously around commit before the user sees the frame, which is useful for measurement but can delay paint.
13. What is the difference between useMemo and useCallback?
Example:Answer
Answer: useMemo caches a computed value; useCallback caches a function reference. Both are performance tools whose dependencies must be correct.
const visibleItems = useMemo(
() => filterItems(items, query),
[items, query],
);
const onPress = useCallback((id) => selectItem(id), [selectItem]);
14. When should you not use useMemo?
Answer
Answer: Do not memoize trivial calculations or unstable dependencies. Comparison, allocation, dependency maintenance, and correctness costs can exceed the saved work.
15. Why do stale closures occur in useEffect and event handlers?
Answer
Answer: A callback captures values from the render that created it. Missing dependencies or a long-lived callback can therefore keep reading old props or state.
16. Why stale closures in useEffect / handlers?
Answer
Answer: Effects and handlers capture values from the render in which they were created. If they outlive that render and are not recreated with correct dependencies, they continue reading old values. Fix the data flow instead of suppressing the exhaustive-deps warning.
17. useMemo vs useCallback vs React.memo?
Example:Answer
Answer: React.memo skips re-rendering a component if props are shallow equal. useMemo caches a computed value. useCallback caches a function reference so child memoization works. I do not wrap everything — I use them when profiling shows expensive re-renders or when passing callbacks to memoized list rows.
const visibleItems = useMemo(
() => filterItems(items, query),
[items, query],
);
const onPress = useCallback((id) => selectItem(id), [selectItem]);
18. useRef vs normal variable vs state vs global variable?
Answer
Answer: A normal variable resets on every render. A ref survives renders but changing it does not re-render, so it fits timer ids and imperative values. State survives and triggers UI updates. A global variable is shared by all instances and has no React subscription, so it can cause stale UI and test leakage. I choose state for visible data, refs for non-visual mutable data, and an explicit store for shared data.
🔴 Senior
19. When can React.memo, useMemo, and useCallback hurt?
Example:Answer
Answer: They add comparison, allocations, dependency maintenance, and cognitive cost; unstable props defeat them and stale dependencies cause correctness bugs.
const visibleItems = useMemo(
() => filterItems(items, query),
[items, query],
);
const onPress = useCallback((id) => selectItem(id), [selectItem]);
React Compiler & Future React
5 reviewed questions.
🔴 Senior
1. How do you debug a regression introduced after enabling React Compiler?
Answer
Answer: First confirm the regression disappears when compilation is disabled for the smallest affected scope. Review compiler diagnostics, purity violations, custom hooks, mutable external state, and third-party boundaries. Reduce the case, preserve trace and build details, apply an opt-out only where required, and report a reproducible issue while keeping the wider rollout controlled. Exact compiler availability, defaults, and opt-out behavior depend on the React and React Native toolchain, so I verify them against the target release.
2. How would you roll out React Compiler safely in React Native?
Answer
Answer: Verify support in the selected React and React Native toolchain, enable compiler linting first, and establish render and interaction baselines. Roll out to a small package or feature, compare bundle, build, rendering, memory, and crash metrics, then expand gradually. Maintain opt-out directives for proven incompatibilities and a quick rollback path. Exact compiler availability, defaults, and opt-out behavior depend on the React and React Native toolchain, so I verify them against the target release.
3. React Compiler versus React.memo, useMemo, and useCallback: how do they differ?
Answer
Answer: React.memo manually skips component rendering when props compare equal; useMemo caches a computed value; useCallback caches a function reference. React Compiler analyzes the program and can insert equivalent memoization automatically where safe. Manual APIs remain useful for explicit contracts, unsupported code, library boundaries, and measured cases the compiler cannot optimize. Exact compiler availability, defaults, and opt-out behavior depend on the React and React Native toolchain, so I verify them against the target release.
4. What coding rules make a component compatible with React Compiler?
Answer
Answer: Components and hooks must remain pure during render, avoid mutating props or previously created values, follow the Rules of Hooks, and keep observable side effects outside render. Unsupported patterns and hidden mutation can prevent optimization or expose existing bugs. Use the compiler's linting and diagnostics as migration feedback. Exact compiler availability, defaults, and opt-out behavior depend on the React and React Native toolchain, so I verify them against the target release.
5. What is React Compiler, and how does it change manual memoization?
Answer
Answer: React Compiler statically analyzes component and hook code and inserts safe memoization when the code follows React's rules. It can reduce routine useMemo, useCallback, and React.memo usage, but it does not make expensive work free or fix incorrect state ownership. Teams should measure generated behavior and remove manual memoization only when compatibility and performance are verified. Exact compiler availability, defaults, and opt-out behavior depend on the React and React Native toolchain, so I verify them against the target release.
React Native Basics
124 reviewed questions.
🟢 Beginner
1. Does React Native use the DOM?
Answer
Answer: No. React Native uses React's reconciler with native host components such as View and Text, not HTML DOM nodes.
2. How does React Native differ from React.js?
Example:Answer
Answer: Both use React components, hooks, and reconciliation. React.js targets the browser DOM and CSS; React Native targets native View, Text, and Image hosts styled through StyleSheet and Yoga.
<View>
<Text>Hi</Text>
</View>;
3. What is React Native?
Example:Answer
Answer: React Native builds native iOS and Android apps with React and JavaScript or TypeScript. Components map to native views rather than a WebView, while logic runs in Hermes or another JS engine.
<View>
<Text>Hi</Text>
</View>;
4. What is the JavaScript thread?
Answer
Answer: The JavaScript thread runs React, business logic, and most handlers. Heavy synchronous work blocks JS-driven updates and makes interactions feel frozen.
5. What is the UI thread?
Answer
Answer: The UI or main thread paints native views and processes touch input. It must meet the frame budget for smooth interaction.
🟡 Intermediate
6. Custom deep links vs Universal Links/App Links vs dynamic links?
Answer
Answer: Custom schemes are easy but any app can claim them and they do not work as normal web fallbacks. Universal Links on iOS and verified App Links on Android use HTTPS and prove domain ownership, so they are preferred. Dynamic-link providers add attribution and fallback behavior, but provider support changes; I design around standard HTTPS links and add a provider only when marketing attribution requires it.
7. Error Boundaries: what do they catch and not catch?
Answer
Answer: An Error Boundary catches render, constructor, and lifecycle errors in its descendant tree and renders fallback UI. It does not catch event-handler errors, async Promise rejections, native crashes, or errors inside the boundary itself. I log componentDidCatch to Sentry and place boundaries around major navigation areas, while async errors are handled explicitly.
8. Explain the architecture of React Native?
Answer
Answer: React runs application logic on the JavaScript runtime, native views commit on the UI thread, and Yoga computes layout. The modern architecture uses JSI, Fabric, TurboModules, and Codegen instead of serialized Bridge traffic.
9. Expo vs React Native CLI?
Answer
Answer: React Native currently recommends using a framework such as Expo for new applications because it provides routing, native project generation, updates, and integrated tooling while still allowing custom native code. Direct use of the React Native Community CLI remains appropriate when an existing native application embeds React Native or when the team intentionally owns the native build setup. Expo and native code are not opposites: development builds, config plugins, and prebuild can support native customization. I choose from concrete native, deployment, and ownership constraints and verify the recommendation against the target React Native release.
10. Google, Facebook, and Sign in with Apple flow?
Answer
Answer: I configure each provider's app id, redirect URI, bundle/package identifiers, and platform files. The native SDK returns an authorization code or identity token, which I send to my backend. The backend validates it with the provider and issues my app's own access and refresh tokens. I do not trust profile data directly from the client. Apple requires nonce handling and Sign in with Apple when other social logins are offered on iOS.
11. How do push notifications work in React Native?
Answer
Answer: The OS delivers pushes through APNs on iOS and FCM on Android. The app registers a device token, sends it to the backend, and the backend asks Apple or Google to deliver. In React Native I commonly use FCM with Notifee. Foreground, background, and killed states differ, and killed state requires correct native setup.
12. How do you detect and act on production crashes?
Answer
Answer: I integrate Crashlytics or Sentry, upload iOS dSYMs, Android mapping.txt, and JS source maps for each release. Alerts include version, device, OS, breadcrumbs, user-safe context, and frequency. I triage impact, identify regression version, reproduce, symbolicate, fix, test, and choose OTA only for compatible JS fixes; native crashes need a store release. I monitor the rollout after the fix.
13. How do you handle orientation and platform-specific UI/code?
Answer
Answer: useWindowDimensions re-renders when dimensions change. I use Platform.select or .ios.tsx and .android.tsx files for meaningful platform differences and keep shared business logic common. Platform-specific UI should preserve the same domain behavior while following native navigation, permission, and design conventions.
14. How do you optimize a large app?
Answer
Answer: I measure before changing code. Typical fixes are state localization, memoizing measured hot components, virtualized lists, image resizing/cache, avoiding synchronous work, lazy initialization, removing heavy libraries, reducing bridge/native crossings, Hermes, and startup deferral. I set budgets for startup, frame time, memory, bundle size, and network rather than saying 'useMemo everywhere'.
15. How do you optimize image loading?
Answer
Answer: Request correctly sized images, compress assets, use caching and progressive loading, avoid base64 and full-resolution list images, and limit concurrent decode pressure.
16. How do you perform an immutable deep state update?
Example:Answer
Answer: Copy every object or array along the changed path and preserve references for untouched branches, or use a library such as Immer.
setState((s) => ({
...s,
user: { ...s.user, address: { ...s.user.address, city: 'Pune' } },
}));
17. How do you persist application state?
Answer
Answer: Persist only durable slices through redux-persist, a store plugin, or explicit hydration, and version migrations.
18. How do you secure API keys in a React Native app?
Example:Answer
Answer: Anything in the JavaScript bundle can be extracted, so client environment variables are not secrets. I restrict public client keys by bundle id, package, or signing fingerprint; keep real secrets behind a backend proxy; store user tokens in Keychain or Keystore; and inject build values from a CI secret manager. Client holds tokens; server holds secrets.
const API_KEY = process.env.API_KEY; // still extractable from the bundle
19. How do you secure tokens and confidential data?
Answer
Answer: I store refresh tokens and private user credentials in iOS Keychain or Android Keystore through a maintained secure-storage library. Access tokens can remain short-lived in memory. AsyncStorage is not secure storage. I clear credentials on logout, avoid logging them, redact crash breadcrumbs, enforce backend expiry and revocation, and use biometric access control only as an additional local gate.
20. How do you verify Hermes is enabled?
Example:Answer
Answer: Check global.HermesInternal in JavaScript and confirm Hermes is enabled in Android and iOS build configuration.
const enabled = !!global.HermesInternal;
21. How does Hermes differ from JavaScriptCore?
Answer
Answer: Hermes is purpose-built for React Native and commonly precompiles bytecode at build time; JavaScriptCore is Apple's general JavaScript engine. Actual startup and memory results depend on the app.
22. How does parent re-rendering affect children?
Answer
Answer: When a parent renders, React calls its children again by default. React.memo can skip a child if its props are shallow-equal. New inline objects and callbacks break that equality, so I use stable primitive props and useCallback only where profiling shows value. The best optimization is often moving state closer to the component that needs it.
23. How should search TextInput requests be debounced?
Answer
Answer: Keep the displayed query responsive and debounce the side-effecting API call, either with an effect timer plus cleanup or a stable debounced function.
24. Local store vs global store vs server state?
Answer
Answer: Local UI state includes modal visibility and input values. Global client state includes auth and a cross-screen draft. Server state is remote, asynchronous, cacheable, and can become stale. I use component state for local data, Redux/Zustand for true shared client state, and React Query or RTK Query for server state rather than copying every API response into a global reducer.
25. Multiple setState in same event?
Answer
Answer: React batches state updates from the same event and processes them before the next render. Setting the same captured value repeatedly does not accumulate changes; use functional updates such as setCount(c => c + 1) when each update depends on the previous one.
26. Old architecture in detail?
Answer
Answer: The old architecture used the Paper renderer and Bridge. JS produced batched JSON messages for UIManager and native modules; native sent events back through the queue. Calls were asynchronous, data had to be serializable, modules often initialized eagerly, and frequent crossings added overhead. It was stable but limited synchronous layout access and modern concurrent rendering. React Native 0.82 and later run only on the New Architecture; 0.81 was the final release that allowed the Legacy Architecture, so migration and fallback advice must be tied to the project's target release.
27. React Native threads and communication?
Answer
Answer: The JS thread runs React and business logic. The UI/main thread renders views and handles native interaction. Layout work uses Yoga and renderer threads depending on architecture. Old RN communicated through an asynchronous serialized Bridge. New RN uses JSI and C++ foundations so Fabric and TurboModules can communicate more directly. Long JS work still blocks JS-driven behavior even when native UI exists.
28. SafeAreaView and responsive screen containers?
Answer
Answer: Safe areas prevent content from overlapping notches, status bars, and home indicators. I prefer react-native-safe-area-context because it provides reliable insets and hooks across navigation setups. A reusable Screen component can combine insets, keyboard handling, scroll behavior, loading, and error states consistently.
29. What React Native libraries have you used, and how do you justify them?
Answer
Answer: I answer by category and trade-off: React Navigation, Reanimated/Gesture Handler, React Query or RTK Query, MMKV/Keychain, Firebase, Sentry, React Hook Form, FlashList, and testing tools. I explain why each was selected, bundle/native impact, maintenance health, New Architecture support, and alternatives. Listing names without describing a production use case is a weak answer.
30. What are closures, and how are they used in React Native?
Example:Answer
Answer: A closure lets a function retain access to variables from its lexical outer scope after the outer function returns. Closures power private state, handlers, timers, debounce, and custom hooks; stale closures occur when callbacks retain old render values.
function makeCounter() {
let n = 0;
return () => ++n;
}
const c = makeCounter();
c();
c(); // 1, 2
31. What are closures? Can you provide a React Native example?
Answer
Answer: A closure is a function together with the lexical variables it can access after the outer function returns. In React Native, an event handler closes over values from the render that created it; this is useful for private state but can produce stale values when dependencies are omitted.
32. What are common React Native security mistakes?
Answer
Answer: Common mistakes are storing refresh tokens in AsyncStorage, hardcoding keys that ship in the bundle, trusting client validation, logging PII, using HTTP, failing to abort requests on logout, and accepting deep links without authentication checks. I address these with secure storage, backend validation, and release-build hygiene.
33. What are iterators and generators?
Example:Answer
Answer: An iterator exposes next() returning {value, done}. A generator declared with function* creates an iterator and can pause and resume at yield, making lazy sequences easy.
function* ids() {
let i = 0;
while (true) yield i++;
}
34. What are microtasks and macrotasks?
Answer
Answer: Promise.then and queueMicrotask schedule microtasks; setTimeout and setInterval schedule macrotasks. After synchronous work, all current microtasks run before the next macrotask.
35. What are stale closures in hooks?
Answer
Answer: A stale closure occurs when a callback reads props or state captured by an older render. Include every reactive value in the dependency list, use a functional state update when deriving from prior state, or use a ref only when the latest mutable value is intentionally required.
36. What are stale closures?
Example:Answer
Answer: A stale closure is a callback that captures props or state from an older render, often in timers, listeners, or effects with incorrect dependencies.
useEffect(() => {
const id = setInterval(() => console.log(count), 1000);
return () => clearInterval(id);
}, [count]);
37. What are the steps to publish an app to production?
Answer
Answer: I set platform versions, test the release build on real devices, run regression, remove debug code, configure signing, and upload AAB and IPA. I complete store metadata, screenshots, privacy, data safety, rating, and export compliance, then use staged or phased rollout and monitor crashes and ANRs.
38. What causes unnecessary re-renders?
Answer
Answer: Parent renders, unstable object or function props, broad context updates, over-wide selectors, and state updates with needless new references can all repeat work.
39. What commonly causes memory leaks in JavaScript and React Native?
Answer
Answer: Common causes are uncleared timers, listeners, subscriptions, sockets, growing caches, globals, and long-lived closures retaining large data. React Native can also retain native-module or bridge references.
40. What does maxToRenderPerBatch control?
Answer
Answer: It limits how many list items are rendered in each incremental batch.
41. What does removeClippedSubviews do?
Answer
Answer: It detaches offscreen native views to reduce traversal and memory pressure.
42. What does updateCellsBatchingPeriod control?
Answer
Answer: It sets the delay between VirtualizedList rendering batches.
43. What happens when setState is called multiple times in one event?
Example:Answer
Answer: React batches updates. Calls based on the same captured value may collapse, so use functional updaters when each update depends on previous state.
setX((x) => x + 1);
setX((x) => x + 1);
44. What is Hermes and why do companies enable it?
Answer
Answer: Hermes is a JavaScript engine optimized for React Native. It improves startup time and memory by using ahead-of-time bytecode instead of parsing a huge JS bundle on device. In interviews I also say how I verify it: check global.HermesInternal, and confirm hermes is enabled in Android/iOS build settings.
45. What is Hermes?
Answer
Answer: Hermes is a JavaScript engine optimized for React Native, with build-time bytecode and mobile-focused runtime and garbage-collection behavior.
46. What is NativeEventEmitter?
Answer
Answer: NativeEventEmitter is the JavaScript subscription interface for events emitted by a native module.
47. What is Reactotron?
Answer
Answer: Reactotron is a development tool for inspecting application state, API activity, and timelines.
48. What is VirtualizedList?
Answer
Answer: VirtualizedList is the core windowing engine behind FlatList and SectionList. It limits mounted rows around the visible viewport.
49. What is middleware? Thunk vs Saga?
Answer
Answer: Middleware sits between dispatch and reducers. Thunk lets actions be functions and is simple for request/dispatch flows. Saga uses generator effects such as takeLatest, race, retry, and cancellation, which fits complex orchestration but adds concepts and bundle size. I default to Thunk or RTK Query and use Saga only when workflows genuinely need its coordination model.
50. What is the React Native Bridge?
Answer
Answer: The Bridge is the legacy asynchronous message queue between JavaScript and native code. It batches JSON-serialized payloads, adding overhead for chatty communication and preventing true synchronous calls.
51. What is the Shadow thread?
Answer
Answer: In the classic renderer, the Shadow thread built the shadow tree and ran Yoga layout before changes reached the UI thread. Fabric integrates layout into its newer C++ renderer pipeline.
52. What is the difference between TestFlight and internal testing?
Answer
Answer: TestFlight is Apple’s iOS beta channel: internal testers receive builds quickly, while external testers need a short review. Android’s Play internal testing track serves fast pre-production QA. I test the exact release binary on both platforms.
53. What is the native driver?
Answer
Answer: The native driver serializes a supported Animated graph so transforms and opacity can update without a JavaScript callback every frame.
54. What is wrong with forEach(async ...)?
Example:Answer
Answer: forEach does not wait for async callbacks, so it fires all promises and continues immediately. That can cause wrong order and unfinished work. For sequential work I use for...of with await. For parallel work I use Promise.all or Promise.allSettled with map.
// sequential
for (const u of users) await save(u);
// parallel
await Promise.all(users.map((u) => save(u)));
55. When do you use Realm?
Answer
Answer: Realm provides an object database with reactive queries and can simplify some offline models.
56. When do you use callbacks versus Promises in native modules?
Answer
Answer: Promises suit one-shot asynchronous results and standardized errors; events suit streams. Callbacks remain possible but are easier to invoke incorrectly.
57. Where should secure data be stored?
Answer
Answer: Credentials belong in Keychain, Android Keystore-backed storage, or SecureStore rather than plain AsyncStorage. Real service secrets remain on the backend.
58. Why can long JavaScript work freeze a React Native UI?
Answer
Answer: App logic runs on the JavaScript thread, so a long synchronous task prevents that thread from processing interactions and updates. Chunk work, defer it, or move CPU-heavy work to native/background execution.
59. Why run animations on the UI thread?
Answer
Answer: Per-frame work on the UI side avoids waiting for a busy JavaScript event loop and helps meet the frame budget.
60. Why use Hermes?
Answer
Answer: Hermes commonly improves startup, memory use, and runtime integration by avoiding large on-device parse work and optimizing for React Native workloads.
61. find() vs filter()?
Example:Answer
Answer: find returns the first matching element or undefined and stops once it succeeds. filter examines the collection and returns a new array containing every match. Use find for one item and filter when the result is a collection.
const users = [{ id: 1 }, { id: 2 }, { id: 2 }];
users.find((x) => x.id === 2); // first matching object
users.filter((x) => x.id === 2); // all matching objects
62. package.json vs package-lock.json and Babel?
Answer
Answer: package.json describes scripts, metadata, and dependency ranges. package-lock.json records the exact resolved dependency tree so CI and developers install reproducible versions, so it should be committed. Babel transforms modern JavaScript and JSX into syntax the target runtime understands; Metro invokes the React Native Babel pipeline.
63. usePrevious, useLatest, useInterval, and useAsync?
Answer
Answer: usePrevious stores the last committed value in a ref. useLatest keeps a ref synchronized with the newest value to prevent stale closures. useInterval stores the latest callback and cleans the timer. useAsync standardizes loading, result, error, cancellation, and optional retry. These hooks solve different lifecycle problems rather than merely hiding code.
64. useThrottle vs useDebounce?
Example:Answer
Answer: Debounce waits for a quiet period and then runs once, so it fits search. Throttle allows at most one run per interval, so it fits scroll analytics or resizing. Debounce favors the final event; throttle preserves periodic updates during continuous activity.
function useDebounce(value, delay = 300) {
const [debounced, setDebounced] = useState(value);
useEffect(() => {
const id = setTimeout(() => setDebounced(value), delay);
return () => clearTimeout(id);
}, [value, delay]);
return debounced;
}
🔴 Senior
65. A screen feels slow. What is your investigation process?
Answer
Answer: Define the user metric, reproduce on a representative device and profileable release build, trace JS, React, UI, native, I/O, and server time, fix one bottleneck, and remeasure.
66. Android SDK integration when a source folder/project is provided?
Answer
Answer: I inspect its Gradle plugin, namespace, minSdk, and dependencies, add it as an included module in settings.gradle, declare implementation project(':sdk'), resolve manifest conflicts, and expose only a thin wrapper to React Native. If it is a Git/Maven URL I prefer publishing or consuming a versioned Maven artifact rather than copying source, because updates and transitive dependencies are safer.
67. Android SDK integration when an AAR is provided?
Answer
Answer: I place the AAR under android/app/libs or a dedicated library module, add flatDir only if no Maven metadata exists, add implementation files('libs/name.aar'), include transitive dependencies manually, add required permissions and ProGuard rules, initialize it in Application, then write a native module/view wrapper. I verify release builds because missing keep rules often appear only with R8.
68. Code splitting and lazy loading in React Native?
Answer
Answer: React.lazy and dynamic imports can defer component evaluation, but React Native still commonly ships a single Metro bundle unless the runtime or OTA solution supports segmented bundles. I lazy-mount screens and defer heavy modules, but I do not promise web-style chunk loading automatically. Expo Router and platform tooling may improve route-level loading depending on the stack.
69. Encryption/decryption in React Native?
Answer
Answer: I prefer platform crypto and Keychain/Keystore over custom JavaScript cryptography. For local files I can generate an AES key, protect that key with the platform keystore, use authenticated encryption such as AES-GCM with a unique nonce, and version the ciphertext format. Keys, IVs, and data have different roles; hardcoding the encryption key in the JS bundle defeats the design.
70. Explain React Native architecture (Bridge vs New Architecture)?
Answer
Answer: The Legacy Architecture used the Paper renderer and an asynchronous serialized Bridge for most JavaScript-to-native communication. The New Architecture uses JSI-based bindings, TurboModules, Fabric, and Codegen to provide typed contracts, lazy module loading, and capabilities needed by modern React rendering; synchronous access is possible only where its contract and thread safety permit it. This removes important serialization and coordination limits but does not make every application automatically faster, so I still profile the actual workload. React Native 0.82 and later run only on the New Architecture; 0.81 was the final release that allowed the Legacy Architecture, so migration and fallback advice must be tied to the project's target release.
71. Explain React Native's New Architecture and why it matters?
Answer
Answer: It replaces serialized Bridge traffic with JSI integration. Fabric renders UI, TurboModules expose typed lazy native APIs, and Codegen generates contracts, improving boundary cost, safety, and concurrent React support. React Native 0.82 and later run only on the New Architecture; 0.81 was the final release that allowed the Legacy Architecture, so migration and fallback advice must be tied to the project's target release.
72. Explain the Fiber architecture?
Answer
Answer: Fiber represents rendering as prioritizable units of work. Each node tracks component state, props, effects, and relationships, allowing work to pause, resume, and support concurrent rendering.
73. Explain the JS thread, UI thread, and rendering bottlenecks?
Answer
Answer: JavaScript runs application and React work; the platform main thread processes input and commits native UI; Fabric coordinates layout and mounting. Heavy work on either timeline can miss frames.
Continue the series
Open the Complete React Native Interview Handbook 2026 series page on Dev.to for the next part.
