Frontend Engineer Interview Questions in India (2026)

Frontend Engineer is one of the most actively hired tech roles in India right now. Knok jobradar tracked 405 openings as of July 2026. Bangalore leads with 102 openings, followed by Delhi (36), Pune (11), Mumbai (6), Hyderabad (5), and Chennai (3).

Salary bands from the same data: Entry (0-2 years) 5-11 LPA, Mid (3-5 years) 12-22 LPA, Senior (6-9 years) 24-40 LPA, Lead or Staff roles 38-58+ LPA.

Interviews for this role cover four areas: core JavaScript, framework knowledge (React dominates India's job market), browser performance, and behavioural questions. Most companies run multiple rounds: a coding screen or take-home, one or two technical rounds, a system design round for senior candidates, and an HR round. This guide covers what candidates commonly report and what is publicly discussed by hiring managers in India.

1. Design a rate limiter for an API serving millions of requests per day.
2. Explain a production incident you debugged. What was root cause?
3. How do you approach system design for high availability?
4. Walk through a code review where you caught a serious bug.
5. Trade-offs between SQL and NoSQL for a payments ledger.
6. How do you estimate task complexity for a sprint?

Three worked answers. The first two show technical depth; the third uses STAR format for the behavioural question.

Q: How does the JavaScript event loop work?

JavaScript runs on a single thread, so only one task executes at a time. The call stack handles synchronous code line by line. When async operations like 'setTimeout' or 'fetch' complete, their callbacks go into a queue. The event loop checks: if the call stack is empty, it picks the next item from the queue. There are two queue types. The microtask queue (Promises, 'queueMicrotask') is fully drained before the event loop touches the macrotask queue ('setTimeout', 'setInterval', I/O events). This means a resolved Promise callback always runs before a 'setTimeout(fn, 0)' callback, even if both are ready at the same time. Knowing this helps you avoid subtle ordering bugs in async code.

Q: A product page loads very slowly on mobile. How do you diagnose and fix it?

I start with Chrome DevTools Lighthouse on a throttled mobile connection to get a baseline and identify the biggest bottlenecks. Common culprits: an oversized JavaScript bundle blocking the main thread, unoptimized images, render-blocking CSS, or slow third-party scripts. I look at the Network tab to spot oversized assets and the Performance tab to find long tasks on the main thread. Fixes typically include code splitting to reduce the initial bundle, converting images to WebP with lazy loading for below-the-fold content, deferring non-critical scripts, and setting proper cache headers. After each change I re-run Lighthouse to measure the actual improvement rather than assuming it helped.

Q: Tell me about a time you disagreed with a designer on a UI decision. (STAR)

Situation: At my previous company, the designer wanted to use infinite scroll for a product listing page. I was concerned it would hurt keyboard accessibility and make it impossible for users to share a specific position in the list.

Task: I needed to raise this concern without blocking the sprint or damaging the working relationship with the designer.

Action: I put together a short document comparing the trade-offs: infinite scroll works well for content discovery feeds but creates problems with keyboard navigation and the browser back button. I referenced publicly reported user research from similar e-commerce products suggesting pagination improved task completion. I shared this with the designer and PM before the design review and suggested prototyping both options.

Result: We agreed on a 'load more' button as a compromise. It kept the single-page feel the designer wanted while fixing the back-button and shareability issues. I learned that framing disagreements around user impact rather than personal preference makes them much easier to resolve constructively.

STAR for behavioural questions: 20% situation, 10% task, 50% action, 20% result with numbers.

CIRCLES for product cases (PM): Comprehend, Identify customer, Report needs, Cut through prioritisation, List solutions, Evaluate trade-offs, Summarise recommendation.

For system design (engineering): clarify scale (DAU, QPS), draw high-level boxes, deep-dive one component, discuss failure modes and monitoring.

Signals that move Frontend Engineer candidates forward in India:
- Ownership of outcomes, not tasks
- Comfort with ambiguity and incomplete data
- Collaboration with cross-functional partners
- Understanding of India-specific constraints (UPI, logistics, multilingual users, price sensitivity)
- Realistic salary expectations aligned with level

A realistic plan for someone with a full-time job. Adjust the pace based on your current level.

Week 1: JavaScript Foundations
Revise closures, the event loop, prototypes, and async patterns. Write small code snippets from memory rather than just reading about them. Solve a few string and array problems on a coding platform to warm up. Do one out-loud explanation of the event loop, either to a friend or recorded on your phone. The goal is to explain each concept clearly without notes.

Week 2: React and Framework Deep Dive
Rebuild a small project using hooks from scratch without tutorials. Focus on 'useCallback' and 'useMemo': understand when they actually help and when they add unnecessary complexity. Read the release notes for your target framework's current major version. If your target companies use Vue or Angular, adjust the focus accordingly.

Week 3: Performance, CSS, and System Design
Run Lighthouse on a site you use regularly and try to improve one metric. Rebuild a CSS layout from scratch using Grid and Flexbox without looking up the syntax. Practice one frontend system design question per day: autocomplete, infinite scroll, a real-time dashboard. Read or watch publicly shared system design walkthroughs.

Week 4: Mock Interviews and Behavioural Prep
Do at least two full mock interviews with a peer or on a practice platform. Prepare STAR stories for common behavioural themes: disagreements, tight deadlines, technical trade-offs, helping a teammate. Review your past projects and be ready to walk through architecture decisions and what you would do differently today.

Knok checks 150+ job sites nightly, applies to jobs matching your resume, and messages HR for you, so your applications keep moving while you study.

• Rambling without a clear result metric
• Badmouthing previous employers
• Quoting global salary data without India context
• Ignoring the 'why this company' question
• Over-indexing on frameworks without showing real shipped work

Questions grouped by theme. Most interviews draw from all three areas, with the mix depending on company type and seniority level.

JavaScript and Browser Fundamentals

1. How does the JavaScript event loop work? Explain the call stack, microtask queue, and macrotask queue.
2. What is the difference between 'null', 'undefined', and a variable that was never declared?
3. Explain closures. Give an example from real code where closures helped you or caused a bug.
4. What is hoisting? How does it behave for 'var', 'let', and 'const' differently?
5. Walk through the critical rendering path: what steps does the browser take from receiving HTML to showing a painted page?

Frameworks, Performance, and CSS

1. How does React reconciliation work? What causes unnecessary re-renders and how do you fix them?
2. What is code splitting and lazy loading? Give an example of how you improved load time in a past project.
3. What is CSS specificity? How do you keep it under control in a large codebase with many contributors?
4. How do you approach accessibility (a11y) in your components? What tools do you use to test it?

Scenario-based

1. A product page loads very slowly on a mid-range Android phone. Walk me through exactly how you diagnose and fix it.
2. You are building a live order-tracking feature. How do you choose between WebSockets, Server-Sent Events, and polling?

Behavioural

1. Tell me about a time you disagreed with a designer or product manager on a UI decision. How did you handle it and what was the outcome?

Study these in roughly priority order. Candidates commonly report that core JavaScript and React are tested in almost every round; the other areas matter more as seniority increases.

Core JavaScript
Event loop, closures, prototypal inheritance, 'this' binding, async/await and Promises, modern ES features (optional chaining, nullish coalescing, structuredClone, and similar additions from recent years), memory management basics.

React or Your Primary Framework
Virtual DOM and reconciliation, hooks ('useState', 'useEffect', 'useCallback', 'useMemo', 'useRef', custom hooks), Context API vs external state management libraries, concurrent rendering features (Suspense, transitions, introduced in recent major releases), component lifecycle.

Browser and Performance
Critical rendering path, repaint vs reflow, core web vitals (LCP, INP, CLS), lazy loading, code splitting, image optimization, service workers and basic caching.

CSS and Layout
Specificity and the cascade, Flexbox and Grid (know both thoroughly), CSS Modules vs CSS-in-JS vs utility-first frameworks and the trade-offs, responsive design and media queries.

Networking and Security
HTTP/1.1 vs HTTP/2 (why the newer version matters for performance), REST vs GraphQL trade-offs, CORS, same-origin policy, XSS prevention, Content Security Policy basics.

Frontend System Design
How to design a component library, a real-time feed, an autocomplete search box, or a large SPA with routing and state. Candidates commonly report this being asked from Mid level onwards.

Data Structures and Algorithms
Product companies and FAANG-adjacent firms commonly test this in a frontend context: string manipulation, array transformations, tree traversal (the DOM is a tree). Service companies and most startups focus less on this area.

Memorising answers without understanding them. Interviewers follow up. If you have memorised 'microtasks run before macrotasks' but cannot explain why or give a concrete example, the follow-up will expose the gap immediately.

Jumping to code before thinking aloud. Most interviewers want to see your reasoning, not just the output. Spend a minute clarifying the problem and saying your approach before you type anything.

Ignoring edge cases. Candidates commonly lose marks not on the core logic but on missing 'what if the input is empty?' or 'what if the API returns an error?'. Think aloud about edge cases even if you do not fully handle every one.

Treating React knowledge as JavaScript knowledge. Knowing hooks does not mean you know JavaScript deeply. Strong product companies test core JS separately. Do not assume your React experience covers the fundamentals round.

Skipping the 'why'. 'I used useMemo here' is much weaker than 'I used useMemo because this calculation runs on every keystroke and profiling showed it was the bottleneck.' Always explain your reasoning, not just your choice.

Sending a generic resume. For Frontend roles, your resume should highlight specific frameworks, concrete performance improvements, and metrics where possible. Vague bullets like 'worked on the frontend' do not stand out in a market with hundreds of applicants for roles like this one.