Frontend Developer Interview Questions India 2026: React, JavaScript and CSS Guide

JavaScript fundamentals are tested at every level. The gap between reading about these concepts and understanding them well enough to answer probing follow-up questions is significant: treat each topic as something to explain to an interviewer, not just memorise. Closures: a closure is a function that has access to its outer scope's variables even after the outer function has returned. Interview question: 'Why does this code log 5 five times?' — the classic var-in-loop problem. Solution: replace var with let, or wrap the loop body in an IIFE to create a new scope per iteration. The Event Loop: JavaScript is single-threaded. The call stack executes synchronous code. The task queue (macrotask queue) holds setTimeout and setInterval callbacks. The microtask queue holds Promise callbacks and queueMicrotask calls. After each call stack frame completes, the event loop processes ALL microtasks before taking the next macrotask. Interview question: 'What is the output order of this code with setTimeout(0), Promise.resolve().then, and synchronous console.log?' Answer requires knowing that synchronous code runs first, then microtasks, then macrotasks. Prototype Chain: every object in JavaScript has a _proto_ property pointing to its prototype. Property lookup walks the chain until it finds the property or reaches null. Interview: 'What does Object.create(null) produce and when is it useful?' (An object with no prototype: useful as a plain hash map with no inherited methods that could conflict with key names like 'constructor'.) Debounce and throttle: implement both from scratch. Debounce: wait until N milliseconds of inactivity before calling the function (search input). Throttle: call the function at most once per N milliseconds regardless of how many calls happen (scroll handler). Both appear in roughly 40% of Indian product company frontend interviews.

React is the dominant frontend library at Indian product companies. Hooks are the primary focus of 2026 React interviews. useState: the re-render trigger. Why does setting state to the same primitive value not trigger a re-render? (Object.is comparison.) Why does mutating an object in state without spreading break re-renders? useEffect: the dependency array controls when the effect runs. What happens if you add a function to the dependency array without wrapping it in useCallback? (A new function reference on every render causes the effect to re-run every render.) The cleanup function: why it matters for timers, event listeners, and WebSocket connections. useCallback: memoises a function reference. When does it help? Only when the function is passed to a child that is wrapped in React.memo, or when the function is in a useEffect dependency array. Common mistake: wrapping every function in useCallback 'for performance' when there is no child memoisation: this adds overhead without benefit. useMemo: memoises a computed value. When does it help? When the computation is genuinely expensive (>1ms) and the dependencies do not change on every render. Common mistake: using useMemo for trivial computations like filtering an array of 10 items. React.memo: prevents a child component from re-rendering when its props have not changed. The gotcha: it uses shallow comparison, so a new object or array reference on every render (even with the same values) breaks the memoisation. useReducer vs useState: useReducer is better when the state has complex transitions with multiple sub-fields or when the next state depends on the previous state in a non-trivial way. Architecture question: 'How would you organise the component tree and state management for a multi-step checkout flow with 5 steps, shared cart state, and user profile data needed on every step?' Good answer: discuss context vs prop drilling vs state management library trade-offs, when to lift state vs use a global store.

CSS is often under-prepared for. At companies like Myntra, Nykaa, and Swiggy, CSS interviews are rigorous because the visual quality of the product is business-critical. Flexbox: justify-content (main axis alignment) vs align-items (cross-axis alignment). flex-grow, flex-shrink, flex-basis (the shorthand flex: 1 expands to flex: 1 1 0%). order property for visual reordering without DOM reordering. CSS Grid: grid-template-columns with repeat(auto-fill, minmax(200px, 1fr)) for responsive card grids. Named grid areas for complex layouts. grid-column and grid-row for spanning. When to use Grid vs Flexbox: Grid for 2D layouts, Flexbox for 1D. CSS Specificity: inline styles (1000), ID selectors (100), class selectors (10), element selectors (1). How to avoid specificity wars: BEM naming convention, avoiding deep nesting, using CSS custom properties for theming. Frontend System Design: a dedicated round at senior frontend roles. 'Design a real-time collaborative design tool like Figma's frontend architecture.' Discuss: WebSocket for real-time sync, operational transformation vs CRDTs for conflict resolution, canvas-based rendering (WebGL for performance), virtual DOM vs direct DOM manipulation for the canvas layer, lazy loading for assets. 'Design an infinite scroll product listing for Myntra with 50 million products.' Discuss: virtual scrolling (only render visible items plus a buffer), pagination vs cursor-based infinite scroll, skeleton loading, prefetching the next page while the user reads the current one. Performance: Core Web Vitals (LCP, CLS, FID/INP). Code splitting with React.lazy and Suspense. Tree-shaking unused code. Image optimisation (WebP, lazy loading, responsive images with srcset).

Frontend developer compensation at Indian companies varies significantly by company type and depth of specialisation. Service IT (TCS, Infosys, Wipro, HCL): Junior (0-2 years): Rs 4-8 LPA. Mid-level (2-5 years): Rs 8-20 LPA. Senior (5+ years): Rs 18-35 LPA. Product companies (Myntra, Nykaa, Swiggy, Razorpay, CRED, Atlassian India): Junior (0-2 years): Rs 12-25 LPA. Mid-level (2-5 years): Rs 22-50 LPA. Senior (5+ years): Rs 45-90 LPA. Staff/Principal (8+ years): Rs 80-150 LPA. Specialisation premium in 2026: Web performance engineers (Core Web Vitals, Lighthouse, bundle optimisation): 15-25% premium. WebGL/Canvas specialists (for design tools, gaming, visualisation): 20-30% premium. Accessibility (a11y) specialists: increasingly in demand, 10-20% premium. Full-stack bonus: frontend engineers who can also write Go or Python APIs typically earn 15-25% more than pure frontend. The React Native premium: engineers who can work in both React (web) and React Native (mobile) are in very high demand at companies like Myntra, Swiggy, and Nykaa where the mobile app is the primary surface.