React Interview Questions 2026

Explain how React's virtual DOM diffing algorithm (reconciliation) works. Why is it O(n) instead of O(n3)? What are the assumptions it makes and when do those break down (causing performance issues)?

What is the difference between useMemo and useCallback? Give concrete examples of when each actually helps vs. when it hurts.

A news feed component re-fetches and re-renders every item whenever a single like count changes. Walk through how you would restructure state so only the affected item re-renders, without introducing a global state library.

Explain Paytm's mini-app platform architecture. Third-party developers build apps that run inside the Paytm super-app. How do you sandbox them (security), manage their lifecycle, share user identity safely (OAuth), and handle payments on their behalf?

What is the difference between async and defer attributes in JavaScript? When would you use each one?

What is Critical CSS, and how does it improve page load performance in React applications?

What techniques can be used to optimize images in React or Next.js applications for better performance?

How would you optimize video delivery in a web application to reduce load times and improve user experience?

What causes unnecessary re-renders in React, and how can React.memo, useMemo, and useCallback help improve performance?

A React application has a slow initial page load. What steps would you take to identify and fix the performance bottlenecks?

How would you optimize the loading of third-party scripts such as analytics, chat widgets, or advertising libraries?

What strategies would you use to improve Core Web Vitals (LCP, FID/INP, CLS) in a React application?

A component renders hundreds of items and users experience UI lag. How would you investigate and optimize the rendering performance?

Implement a debounce function from scratch in JavaScript. Then explain where you would use debounce vs throttle in a payment checkout flow — for example on a search input, a "Pay Now" button, and a scroll event handler.

Explain the reconciliation algorithm in React. How does React decide which DOM nodes to update when state changes? What is the role of the key prop and what happens when you use an array index as a key versus a stable unique ID?

Build a custom useFetch hook in React that accepts a URL, returns { data, loading, error }, handles component unmount (cleanup), and prevents state updates on an unmounted component. Show the complete implementation.

Implement a reusable PaymentForm component in React with fields for card number, expiry, and CVV. Add real-time validation using controlled components: card number must be 16 digits, expiry must be a future month, CVV 3–4 digits. No external libraries.

You need to implement optimistic UI for a "Add to Cart" button in a React e-commerce app. When the user clicks, the UI should update immediately, but revert if the API call fails. How would you implement this pattern without any state management library?

Design the frontend architecture for a PayU checkout SDK that can be embedded in any merchant website as a script tag. It must render a payment form in an iframe, handle cross-origin communication, support multiple payment methods (card, UPI, netbanking), and work across React, Vue, and plain HTML merchant sites.

You are building a multi-step payment flow: Cart → Address → Payment Method → OTP → Confirmation. Each step has its own data, validation, and API calls. How would you architect state management for this flow in React without Redux? Discuss trade-offs.

Design and implement a recursive category tree component in React for a merchant product catalogue. The tree can be N levels deep, each node can be expanded/collapsed independently, and the selected path must be highlighted. Clicking a leaf node should emit the full path (e.g. "Electronics > Phones > Android"). Optimise to avoid re-rendering siblings when one node is toggled.

A merchant reports that their checkout page built with your SDK scores 38 on Google Lighthouse. Walk through your systematic debugging process: which Core Web Vitals are likely failing, what tools you would use, and give five concrete optimisations specific to a payment checkout flow.

PayU wants to run A/B tests on the checkout button colour and payment method ordering to improve conversion rates. As the frontend engineer, how would you design the experimentation infrastructure: flag evaluation, consistent user bucketing, avoiding layout shift between variants, and measuring the right success metrics?

A React dashboard with 20 charts re-renders every time any filter changes, causing a 3-second lag. How do you optimize it?

A multi-step booking form (dates → guests → payment) loses all user input if they navigate back a step or refresh the page. How would you fix this without a backend round-trip on every keystroke?

Your React app initial load time is 8 seconds. Users complain it is too slow. Walk me through your optimization strategy.

What is React 19 use() hook and how does it change async data fetching compared to useEffect?

A list of 50,000 items renders in a React component. Users scroll and experience jank. How do you fix it without pagination?

Explain the difference between reconciliation and the commit phase in React. Why can render be interrupted in Concurrent Mode but commit cannot?

A drag-and-drop board with 500+ cards becomes laggy while dragging. What specific JavaScript/DOM techniques would you use to keep the drag interaction smooth?

You're building a browser-based image editor with layers, filters, and undo/redo. Would you manage canvas rendering state inside React state, or outside it? Justify your choice.

What is the difference between useState and useRef in React? Give an example where using the wrong one would cause a bug.

Explain the difference between props and state in React with a simple example of each.

What is a controlled component in React? Rewrite an uncontrolled input (using a ref) into a controlled one and explain the trade-off.

How does useEffect replace the class component lifecycle methods componentDidMount, componentDidUpdate, and componentWillUnmount?

Your React app has 5 sibling components that all need access to the logged-in user's name. Would you use prop drilling, Context, or a state management library? Justify your choice.