Frontend Developer Interview Questions India 2026 — React, JS & System Design

1. What is the event loop in JavaScript? JS is single-threaded. The event loop continuously checks the call stack and the callback queue — when the call stack is empty, it pushes the first item from the queue to the stack. Microtasks (Promises, queueMicrotask) run before macrotasks (setTimeout, setInterval) after each stack frame. 2. What is the difference between var, let, and const? var: function-scoped, hoisted (initialized to undefined). let: block-scoped, not initialized (TDZ — temporal dead zone before declaration). const: block-scoped, must be initialized at declaration, reference is immutable (object properties can still change). 3. What is closure in JavaScript? A closure is a function that retains access to its outer scope even after the outer function has returned. This is the basis for module patterns, memoization, and factory functions. 4. What is the difference between == and ===? === (strict): no type coercion — 1 === '1' is false. == (loose): coerces types — 1 == '1' is true. Always use ===; == produces unexpected results and is considered a code smell. 5. What is prototype chain and prototypal inheritance? Every JS object has a __proto__ pointing to its prototype. When you access a property, JS walks up the chain until it finds it or hits null. ES6 classes are syntactic sugar over prototypal inheritance. 6. What is async/await vs Promises vs callbacks? Callbacks: original async pattern, leads to callback hell. Promises: chainable, .then()/.catch()/.finally(). async/await: syntactic sugar over Promises — cleaner, but same underlying mechanics. Use async/await by default; know Promises for interview questions. 7. What is debounce vs throttle? Debounce: delays execution until N ms after the LAST call — useful for search inputs. Throttle: limits execution to once per N ms regardless of call frequency — useful for scroll handlers. Knowing how to implement both from scratch is an interview staple.

8. What is the difference between useMemo and useCallback? useCallback: memoises a function reference — prevents child re-renders when passing callbacks as props. useMemo: memoises a computed value — prevents expensive recalculations. Both take a dependency array. Neither is free — adds overhead; only use when profiling shows a real re-render problem. 9. What is the React reconciliation algorithm? React compares the virtual DOM tree (new render) against the previous tree. It uses a heuristic: same element type in same position = update; different type = unmount + remount. Keys tell React to match elements across a list by identity, not position. 10. What is useEffect dependency array? Empty array []: run once on mount. Specific deps [a, b]: run when a or b changes. No array: run after every render. Cleanup function: returned from useEffect, runs before the next effect and on unmount. 11. What are React Server Components? RSC (available in Next.js App Router) render on the server — zero client JS bundle for those components. They cannot use state, effects, or browser APIs. Client components use 'use client' directive. Mixing RSC and client components is the pattern for optimal bundle sizes. 12. What is Context vs Redux for state management? Context: built-in, good for low-frequency updates (theme, auth, locale). Redux / Zustand: better for high-frequency or complex state — they avoid unnecessary re-renders Context triggers. Modern recommendation: Zustand for most apps, Context for auth/theme. 13. How would you optimise a React app with 10,000 list items? Virtualisation (react-window or react-virtual): render only visible items. Memoization (React.memo, useMemo, useCallback): prevent unnecessary re-renders. Code splitting (lazy + Suspense): reduce initial bundle. Profiler: identify actual bottlenecks before optimising.

14. What is the CSS box model? Content → Padding → Border → Margin. box-sizing: content-box (default): width doesn't include padding/border. box-sizing: border-box: width includes padding/border — easier to reason about, use for everything. 15. What is the difference between Flexbox and CSS Grid? Flexbox: one-dimensional (row OR column). Grid: two-dimensional (rows AND columns). Use Flexbox for nav bars, button groups, card contents. Use Grid for page layouts, card grids. 16. What is CSS specificity? Inline styles (1000) > ID selectors (100) > Class/attribute selectors (10) > Element selectors (1). The highest specificity wins. !important overrides everything — avoid it. 17. What happens between the URL being typed and the page rendering? DNS resolution → TCP connection → TLS handshake → HTTP request → server response → HTML parsing → DOM construction → CSSOM construction → Render tree → Layout → Paint → Composite. Knowing this sequence (the 'critical rendering path') is tested at Razorpay and Flipkart.

Increasingly asked at SDE-2+ frontend roles at companies like Flipkart, Swiggy, and Razorpay: 'Design the Swiggy order tracking UI' — focuses on WebSocket vs polling tradeoff, optimistic updates, failure handling, reconnection logic. 'Design a Google Docs-style collaborative editor' — OT (Operational Transformation) vs CRDT, WebSocket, conflict resolution. 'Design an infinite scroll feed with search' — client-side state management, debounced search, virtual scrolling, skeleton screens, error boundaries. 'Design a component library' — versioning, design tokens, Storybook, accessibility, tree-shaking. Frontend system design rubric (what interviewers score): 1. Component architecture (how you break up the UI) 2. State management decision (local vs global vs server state) 3. Network strategy (caching, polling, WebSocket choice) 4. Performance (bundle size, lazy loading, rendering strategy) 5. Error handling and edge cases (empty states, loading, failure)

Razorpay Frontend SDE: • Heavy JavaScript internals — closures, event loop, prototype chain • React performance optimisation (profiler, memoisation) • CSS animations, GPU compositing • System design: design the Razorpay checkout widget (iframe security, postMessage) Swiggy Frontend SDE: • React 18 features (concurrent mode, Suspense, useTransition) • Web performance (CLS, LCP, FID — Core Web Vitals) • Real-time order tracking implementation • 1 coding round: usually array/string manipulation in JS Flipkart Frontend SDE: • TypeScript (strict mode, generics, utility types) • Micro-frontend architecture • SSR vs CSR vs ISR tradeoffs (they use Next.js) • System design: design a product listing page with filters (URL state, pagination, SSR)