Frontend Developer Interview Questions in India 2026

Event Loop and Async: The JavaScript event loop processes the call stack and message queue. Promises and async/await are syntactic improvements over callbacks. Key interview question: 'What is the output of this code with setTimeout, Promise, and synchronous code mixed together?': tests microtask queue (Promises) vs macrotask queue (setTimeout) priority.

Closures: A function that remembers its outer scope even after the outer function has returned. Common interview trap: creating closures in a loop with var (all closures share the same variable). Fix with let (block-scoped) or an IIFE.

This keyword: In JavaScript, `this` depends on how a function is called, not where it is defined. Arrow functions inherit `this` from their lexical scope. Regular functions get `this` from the call site. This trips up many candidates: know the rules for: method calls, standalone functions, arrow functions, call/apply/bind, and constructors.

Prototypes and Prototype Chain: Every JavaScript object has a prototype. Property lookup walks up the prototype chain until found or until the chain ends (null). Class syntax in ES6 is syntactic sugar over prototype-based inheritance.

ES6+ Features: Destructuring, spread/rest operators, template literals, optional chaining (?.), nullish coalescing (??), Promise.all vs Promise.allSettled, Map vs WeakMap, Set: all commonly tested at Indian frontend interviews.

useState vs useReducer: useState for simple values. useReducer for complex state with multiple sub-values or when next state depends on previous in complex ways. useReducer makes state transitions explicit and testable.

useEffect dependencies: Missing dependencies can cause stale closures (bug). Unnecessary dependencies cause infinite loops. Best practice: include all values used in the effect in the dependency array. Use useCallback and useMemo to stabilise function and object references.

React reconciliation: React uses a virtual DOM diffing algorithm to determine the minimum set of DOM updates. Key prop is critical: it tells React which list items are the same across renders. Using array index as key causes bugs when items reorder.

Code splitting and lazy loading: React.lazy() and Suspense enable dynamic imports for code splitting. Reduces initial bundle size. Critical for performance on Indian mobile networks.

Custom hooks: Extract stateful logic into reusable functions. useDebounce, useFetch, useLocalStorage are common examples. Interview question: 'Write a custom hook that fetches data from an API with loading and error states.'

Context API vs Redux vs Zustand: Context for low-frequency global state (theme, auth). Redux for complex state with many consumers and frequent updates (large applications). Zustand for lightweight global state without boilerplate. Know when not to use Context (performance issue with frequent updates causing excessive re-renders).

CSS specificity: Inline styles > ID selectors > class/pseudo-class > element selectors. Specificity calculation: (inline, ID count, class count, element count). !important overrides everything.

CSS layout: Flexbox for one-dimensional layouts (row or column). Grid for two-dimensional layouts. When to use which: Flexbox for nav bars, card rows, centering. Grid for page layouts, complex card arrangements.

Browser rendering pipeline: Parse HTML → DOM tree. Parse CSS → CSSOM tree. Combine → Render tree. Layout (calculate positions/sizes). Paint (draw pixels). Composite (GPU layers). Reflows (layout recalculation: expensive) are triggered by dimension/position changes. Repaints (redrawing without layout: less expensive) are triggered by colour/visibility changes.

Critical rendering path: Optimise by: minimising render-blocking resources (async/defer scripts), inlining critical CSS, reducing render-blocking fonts, lazy loading below-the-fold content.

Core Web Vitals: LCP (Largest Contentful Paint: loading), FID/INP (First Input Delay / Interaction to Next Paint: interactivity), CLS (Cumulative Layout Shift: visual stability). Google uses these for search ranking. India-specific: optimise heavily for LCP: Indian 4G average load times are 2–3x slower than US.

Frontend performance optimisation: Bundle size reduction (tree-shaking, code splitting), image optimisation (WebP format, lazy loading, srcset for responsive images), caching (service workers, HTTP caching headers), preloading critical resources, reducing JS parse and execution time.

Practical questions commonly asked: 'Build an infinite scroll component in React.' 'Implement a debounced search input.' 'Explain how you would optimise a slow React list render.' 'Build a simple state management solution without Redux.' 'Write a function to deep clone an object in JavaScript.'