Interview Questions

What are primitive and non-primitive data types?

Primitive: String, Number, Boolean, Null, Undefined, Symbol, BigInt.
Non-Primitive: Objects, Arrays, Functions (reference types).

What is pass by value and pass by reference?

Pass by value: A copy of the value is passed (primitives).
Pass by reference: A reference to the original data is passed (objects).

What is lexical scope?

Scope determined by the physical placement of code; inner functions have access to outer scope.

What is hoisting?

JavaScript's behavior of moving variable and function declarations to the top of their scope.

What is an event loop in JavaScript?

It handles asynchronous callbacks by dequeuing tasks from the event queue and executing them one by one.

What are pure and impure functions?

Pure: No side effects, same output for the same input.
Impure: Causes side effects or depends on external state.

What are higher-order functions?

Functions that take other functions as arguments or return them.

What are anagrams?

Two strings that have the same letters in a different order.

What is the difference between normal function and arrow function?

Normal functions have their own this, can be used as constructors, and are hoisted.
Arrow functions inherit this from their lexical scope, can't be constructors, and are not hoisted.

What is the difference between shallow copy and deep copy?

Shallow copy duplicates only the top-level structure; nested objects still reference the original.
Deep copy duplicates everything recursively, creating completely independent copies.

What are the differences between class and functional components?

Class: Uses lifecycle methods, this, and state.
Functional: Uses hooks, simpler syntax, cleaner code.

What does "this" refer to in React?

In class components, this refers to the current class instance.

What is the lifecycle of a React component?

Mounting, Updating, Unmounting (for example: componentDidMount, componentDidUpdate, componentWillUnmount).

What are controlled and uncontrolled components?

Controlled: Form elements whose value is controlled by React state.
Uncontrolled: DOM handles state using refs.

What is useMemo and useCallback, and what's the difference?

useMemo caches the result of a function.
useCallback caches the function reference.

What are custom hooks and how do they affect performance?

Reusable functions built on hooks; improve code reuse, but should be optimized to avoid unnecessary re-renders.

If I want to reduce re-rendering, what is the best approach?

Use React.memo, useMemo, useCallback, and avoid unnecessary state/prop updates.

What are the major causes of re-rendering?

State or props change, parent re-renders, context updates.

If a value changes in the parent component and I don't want the child to re-render, how would I do that?

Wrap the child in React.memo and avoid passing new references.

What is React.memo?

A HOC that memorizes a functional component to prevent re-renders unless props change.

What are higher-order components and functions?

HOC: A function that takes a component and returns a new component.
HOF: Functions that return or accept other functions.

What is forwardRef?

A React API to forward a ref through a component to a child component's DOM node.

What is Context and explain its flow?

Allows global state sharing via Provider and Consumer or the useContext hook.

What is Redux and explain its flow?

Centralized state management. Flow: Action -> Reducer -> Store -> View.

What middleware is Redux?

A function that intercepts actions before they reach reducers (for example: redux-thunk).

Difference between middleware and reducer in Redux?

Middleware handles side effects; reducer updates the state based on actions.

Which is better: Redux or Context?

Context is simple and good for small apps. Redux is better for large, complex apps with advanced state handling needs.

What is the difference between React and React Native?

React: for web apps using HTML/CSS/JS. React Native: for mobile apps using native components.

What is Fabric architecture?

A new React Native rendering engine that improves performance and concurrency by unifying threading.

What does Hermes do?

A lightweight JavaScript engine optimized for React Native to improve performance, reduce app size, and improve time-to-interactive.

What is Babel in React Native?

A JavaScript compiler that transpiles modern JavaScript into compatible code for older environments.

Axios vs Fetch – which is better and why?

Axios has simpler syntax, handles JSON by default, supports interceptors, and can cancel requests.
Fetch is native but requires more boilerplate.

What is the major thing in GraphQL?

Clients can request exactly what they need. Uses queries and a schema to optimize data fetching.

What does APK stand for and what does AAB stand for?

APK: Android Package. AAB: Android App Bundle.

What is the major difference between APK and AAB?

AAB is a publishing format; the Play Store generates APKs per device, resulting in smaller app size.

Explain the process of CI/CD pipelines.

CI: automated building and testing on each commit. CD: automatically deploys tested code to production.

What is the difference between map and forEach?

map returns a new array; forEach doesn't return anything (it is used for side effects).

What is the difference between a payment gateway and a payment processor (PSP)?

A payment gateway is the service/API that securely routes transactions (often handling encryption and tokenization). A payment processor is the entity that actually processes the card transaction through networks (and banks). In practice, many PSPs provide both.

What is the typical flow to take payments in React Native (Stripe-like integration)?

1) App collects payment details (card info) and sends non-secret identifiers to your backend.
2) Backend creates a PaymentIntent/Charge and returns a client secret.
3) App confirms the payment using the client secret and a publishable key.
4) Backend finalizes order state based on webhooks.

Why should secret keys never be stored in the mobile app?

Mobile apps are not fully trusted. Secret keys can be extracted from the binary or intercepted. Keeping secrets on the backend reduces fraud and helps you meet security/compliance expectations.

What are webhooks and why are they critical for payment status?

Webhooks notify your backend about asynchronous events like success, failure, refunds, or retries. They are the source of truth for final payment state (instead of trusting only the client result).

How do you handle retries safely when creating charges?

Use idempotency keys on the backend so repeated requests (due to timeouts or client retries) do not create duplicate charges. Also implement proper order state checks before retrying.

What is a safe refund flow?

Trigger refunds from the backend, record refund intent/state in your database, and update UI/order status based on refund webhooks. Handle partial refunds and ensure you can reconcile states after delays.

What is the purpose of native bridging in React Native?

Bridging is how JavaScript communicates with native code (and how native modules communicate back). It allows you to call platform APIs from JS and expose native functionality as JS-accessible modules or components.

How does a native module get exposed to JavaScript?

You implement a native module, register it with the React Native runtime, and define method signatures/parameters so the JS side can call it (plus optionally emit events). In the new architecture, specs/codegen generate bindings more strongly.

When should you use NativeEventEmitter (events) instead of calling a native method?

When the native side produces ongoing or asynchronous events (for example: location updates, Bluetooth updates, download progress). Events are better than polling because you avoid frequent JS->native calls.

What performance pitfalls are common with the classic bridge?

Too many small bridge calls, large JSON payloads, and frequent serialization/deserialization. To improve performance, batch work, reduce payload sizes, avoid high-frequency calls, and move heavy computation toward JSI/TurboModules when appropriate.

What is the difference between a native module and a native UI component?

Native modules are typically invoked imperatively from JS for actions/data. Native UI components are rendered as part of the view hierarchy and support layout/props/events similar to React components.

What are TurboModules in the React Native new architecture?

TurboModules are a mechanism for calling native functionality from JS with improved performance using JSI and generated bindings. They reduce overhead compared to the classic serialized bridge.

How do TurboModules differ from the classic bridge?

Classic bridging typically uses message passing with serialization and is more constrained in sync access. TurboModules use direct bindings through JSI, enabling better performance and supporting sync where it is safe.

What does codegen do for TurboModules?

Codegen reads a module specification (types/spec) and generates the JS/TS bindings and native glue so both sides agree on method names and argument shapes, improving type safety and reducing manual boilerplate.

When might a TurboModule method be sync vs async?

Sync is used for operations that are fast and thread-safe enough to run immediately. Async is used for IO, long-running work, or when you need to avoid blocking the JS thread.

What are the main benefits you should mention in an interview?

Better performance (less overhead), stronger typing via specs/codegen, clearer contracts between JS and native, and improved integration with Fabric and the rest of the new architecture.

What are common strategies to build offline-capable React Native apps?

Use local persistence (key-value store or database), cache GET responses, support optimistic UI for writes, queue mutations while offline, and sync changes when connectivity returns.

Where do you store offline data on mobile?

Common options are AsyncStorage for small key-value data, MMKV for fast key-value caching, and SQLite for structured/relational data and larger offline datasets.

How do you queue writes and replay them later?

Store a durable queue of pending operations locally (with timestamps and idempotency identifiers). When network is available, replay requests in order and update local state based on server responses.

How do you resolve conflicts when the device reconnects?

Use versioning (ETags/updatedAt), choose a conflict strategy (last-write-wins, merge rules), and surface resolutions when automatic merging is not possible.

How do you detect network changes in React Native?

Use libraries like @react-native-community/netinfo to listen for connectivity changes and trigger sync/queue replay when the app regains network.

What UX patterns improve offline reliability?

Clearly show offline status, keep the user informed about queued actions, provide retry controls when sync fails, and ensure the app can recover after being killed/restarted.

What are cloud functions and why do mobile apps use them?

Cloud functions (serverless) execute backend logic without you managing servers. Mobile clients use them for secure operations like billing, permissions checks, media processing, and aggregating data.

What problems do cloud functions help you avoid?

They help keep secrets off the client, centralize authorization, reduce client complexity, and allow asynchronous processing (webhooks, background tasks, scheduled sync).

How do you design cloud endpoints for retries and idempotency?

Assume requests can be repeated due to timeouts or provider retries. Use idempotency keys, ensure operations are safe to call multiple times, and return consistent results.

How would you handle payment webhooks with cloud functions?

Create a webhook endpoint that verifies signatures, maps the event to internal records, updates payment/order state in the database, and handles duplicate events with idempotency.

How do you secure cloud functions?

Use authentication (JWT/Firebase auth), verify caller permissions/roles, validate inputs, and restrict access with server-side checks and secure environment variables.

What does it mean when a Promise is rejected in JavaScript?

It means the async operation failed. The rejection carries an error value (often an Error object). If you use await, it throws, and if you use .then, you must handle .catch.

How do you handle rejected promises with async/await?

Wrap the awaited calls in a try/catch block, then map the caught error to a user-friendly message and decide whether to retry or update UI state.

What is an unhandled promise rejection and why is it a problem?

An unhandled rejection is a rejected Promise without a catch handler. It can crash the app (or silently fail depending on environment) and makes errors harder to detect and recover from.

How do you differentiate network errors vs HTTP errors?

Network errors usually indicate connectivity/timeout and may have no HTTP status code. HTTP errors have a response status (400/401/500 etc.). Use the error shape from your HTTP client (Axios/fetch) to classify.

How should you implement retries?

Retry only idempotent operations, use exponential backoff with jitter, and retry based on error categories (for example: 429/5xx or transient network failures). Avoid retry loops for 4xx validation errors.

What are common cross-platform issues you have seen between iOS and Android?

Differences in keyboard behavior, permission flows, file paths/storage permissions, notification behavior, gesture handling, and subtle layout/typography differences across device densities.

What is a clean approach to platform-specific code in React Native?

Use Platform.OS for small, isolated differences, and keep platform code in separate modules/files when possible. Prefer feature detection or capabilities checks over broad OS checks.

How do you keep UI consistent across devices and screen sizes?

Use relative layout patterns, avoid hardcoded pixel assumptions, test on multiple screen sizes, and consider accessibility settings like dynamic font scaling.

How would you debug a layout issue that happens only on one platform?

Reproduce with platform-specific logging, inspect layout with RN dev tools, verify font scaling and safe area handling, and check native configuration differences (status bar, notch, timezone, locale).

What testing strategy helps catch cross-platform regressions?

Combine unit tests for logic, component/integration tests for UI behavior, and end-to-end tests for critical flows on both iOS and Android. Add visual checks/snapshots when appropriate.

How do you handle HTTP 400 (Bad Request) in a mobile app?

Treat it as a validation/client input error. Parse field-level errors when available, show appropriate messages in the UI, and avoid retrying until the user fixes the input.

How do you handle HTTP 401 (Unauthorized) and token expiry?

Trigger a refresh token flow when possible, retry the original request once after refresh, and if refresh fails, redirect to login/logout and clear invalid credentials.

What are common meanings of 403, 404, and 409?

403 is permission-related, 404 is missing resource/route, and 409 is conflict (often versioning/state conflict). Map each to a clear user outcome and correct recovery action.

What does HTTP 429 mean and how do you respond?

It indicates rate limiting. Back off using exponential retry-after logic, reduce request frequency, and avoid hammering the API.

How do you handle 5xx server errors vs client-side errors?

5xx is usually transient. Retry with backoff for safe operations, and show a generic message when it is not recoverable. 4xx usually needs user action or a code fix.

What should you do when the error is not an HTTP response (timeout, DNS, offline)?

Classify as network failure, show an offline/retry option, and consider queuing operations for later sync instead of immediate failure.