Freshers are usually tested on HTML/CSS basics (semantic tags, flexbox, grid, specificity), core JavaScript (closures, hoisting, event loop, promises, == vs ===), and simple React concepts like components, props vs state, and useState/useEffect. Expect one or two easy DSA problems, a small live coding task such as a counter or todo list, and questions about the projects on your resume. Interviewers at product companies care more about how you reason through a problem than about memorized definitions.

At 3 years, interviewers go deeper into JavaScript internals and React. Common areas include event loop output-prediction questions, implementing debounce and throttle from scratch, React reconciliation, useEffect pitfalls, performance optimization with memoization and virtualization, and state management trade-offs. A machine coding round is almost always part of the process at this level, and you may also face a light frontend design question such as building an autocomplete widget.

At 5 years, the focus shifts from syntax to architecture. Expect frontend system design questions (design a news feed, autocomplete, or rich text editor at scale), discussions on Core Web Vitals, code splitting, micro-frontends, design systems, and testing strategy, along with trade-off questions on state management approaches. Machine coding rounds still appear, but the evaluation bar rises to code structure, scalability, and clean handling of edge cases, plus signals of ownership and mentoring.

The most frequent React questions cover the virtual DOM and reconciliation, controlled vs uncontrolled components, keys in lists, useEffect dependencies and cleanup, useMemo vs useCallback, context vs prop drilling, lifting state up, and performance optimization. Interviewers usually follow a theory question with a live task — building a custom hook, a debounced search box, or a tab component — so be ready to write working code, not just explain concepts.

No. Interviewers probe with follow-ups like "why" and "what if", and machine coding rounds test whether you can actually build working software under time pressure. A better approach is to understand the reasoning behind each concept, practice implementing common patterns from scratch, and rehearse explaining your thought process out loud. Use question banks to identify gaps, not as a script to recite.

Several popular GitHub repositories and interview prep platforms offer frontend interview question compilations as PDFs. Before downloading one, check that it is organized topic-wise (JavaScript, React, CSS, browser internals, performance), includes explanations rather than one-line answers, and covers machine coding and system design — the two rounds that decide most frontend hires at product companies. An outdated PDF with only definitions will not reflect how interviews actually work today.

A machine coding round is a timed hands-on round, usually 60–90 minutes, where you build a small but complete working application or feature — such as a todo app, autocomplete, or tic-tac-toe — with a functioning UI. A regular coding round focuses on algorithmic DSA problems instead. In machine coding, you are evaluated on working functionality, component breakdown, state management, code readability, and edge cases, followed by a discussion where you justify your decisions. This format is very common in frontend hiring at Indian product companies.

Practice building small apps end-to-end under a timer: a todo list with filters, an autocomplete with debouncing, nested comments, tic-tac-toe, a sortable and paginated data table, and a star-rating widget. Use plain JavaScript and React without heavy libraries, get a basic working version running first and then refactor, and always handle empty states, errors, and rapid user input. Completing 15–20 timed problems and reviewing what clean, working code looks like matters far more than reading theory.

Frequently asked problems include autocomplete/typeahead with simulated API calls, a todo app with add/edit/delete/filter, a nested comment section with replies and votes, tic-tac-toe with win detection, a data table with sorting, search and pagination, traffic light or elevator simulation, a folder–file explorer, and poll or quiz apps. React versions emphasize component structure and state flow, but the core test is the same everywhere: can you ship working, well-structured code within the time limit?

A system design interview is an open-ended round where you design a large-scale system such as a URL shortener, chat app, or news feed. You are evaluated on how you clarify requirements, estimate scale, draw a high-level architecture, choose databases, caches and queues sensibly, and defend your trade-offs. For frontend roles, a variant called frontend system design tests component architecture, state management, API contracts, and rendering strategy instead of backend infrastructure. There is no single correct answer — structured thinking and clear communication are what get scored.

Start with the building blocks: load balancing, caching, CDNs, SQL vs NoSQL, sharding, message queues, and consistency vs availability. Then study 10–12 classic designs — URL shortener, chat app, social feed, rate limiter — and practice drawing each within 35–45 minutes. If you are targeting frontend roles, add frontend-specific designs such as autocomplete, infinite scroll, and collaborative editors, covering component breakdown, data flow, and performance. Four to six weeks of consistent practice with feedback usually brings a clear improvement.

Follow a fixed sequence: clarify functional and non-functional requirements and agree on scope; do quick back-of-the-envelope estimates; sketch the high-level design with core components and data flow; deep-dive into the areas the interviewer pushes on; and finish by discussing bottlenecks, failure handling, and trade-offs. Keep narrating your thinking throughout — interviewers score your reasoning, not just the final diagram. Asking scoping questions early is seen as a strong positive signal.

The classics are designing a URL shortener, a chat app like WhatsApp, a social feed like Instagram or Twitter, a video platform like YouTube, a rate limiter, a notification system, and a web crawler. Frontend-focused interviews often ask you to design an autocomplete search, an image carousel, an infinite-scroll feed, or a collaborative editor. Practicing these 10–15 problems thoroughly covers most variations asked at product companies in India.

Both teach the same fundamentals in different formats. The System Design Interview by Alex Xu is a two-volume book that walks through complete designs step by step and is excellent for building depth in high-level design; it is one of the most widely used resources among candidates in India. Grokking the System Design Interview is a course built around reusable design patterns and classic problems, which many find easier to start with because of its structured templates. A common strategy is to use the book for depth and the course for pattern-based practice — and frontend engineers should add frontend-specific design practice on top of both.