Google · interview prep
Google Frontend Interview Prep Questions
25 frontend interview practice questions oriented toward Google-style loops (Strong CS fundamentals, clear problem solving, deep JS/platform literacy, and scalable UI thinking.). Unofficial composite guide—not Google property.
Expect coding comfort plus browser/JS depth. System design (frontend) may appear at mid+ levels. This list emphasizes event loop, performance, data structures adjacency, and clean component thinking—not leaked internal questions.
- 25 questions
- javascript
- react
- html
- css
How to use this list
- Answer out loud in 60–90 seconds, then check the written answer.
- Where a “Deeper guide” link appears, open it after you attempt the answer yourself.
- Pair with DSA, machine coding, and playground drills.
javascript
1.How would you reason about a performance regression in a large JS app?
Reproduce with a profile (Performance panel), identify long tasks and forced layout, check bundle growth and third parties, then fix with code-splitting, yielding, or reducing main-thread work. Measure before and after with field metrics when possible.
2.Explain how you would design a rate limiter utility in JavaScript.
Clarify token bucket vs fixed window, single-tab vs multi-tab, and whether limits are client-side only. Implement with timestamps/queue, document limitations (client limits are UX, not security), and test concurrency.
3.What is the JavaScript event loop?
A single JS agent has one call stack. Host APIs (timers, network, DOM) finish work and queue callbacks. The event loop runs a macrotask until the stack is empty, drains all microtasks, may render, then takes the next macrotask. Workers are separate agents with their own stacks.
react
4.What is React’s core mental model?
UI is a function of state. You describe trees of elements; React reconciles descriptions and updates the host tree (DOM or native). Prefer data → view over imperative DOM mutation.
html
5.What is semantic HTML and why does it matter?
Use elements that match meaning (nav, main, button, label) so browsers, assistive tech, and crawlers understand structure. CSS can fake appearance; it cannot replace missing semantics without extra ARIA and keyboard work.
css
6.What is the CSS box model?
Every box has content, padding, border, and margin. With content-box, width applies to content only; with border-box, width includes padding and border. Most layout systems set border-box globally.
javascript
7.What is the difference between microtasks and macrotasks?
Microtasks (promise reactions, queueMicrotask, await continuations, MutationObserver) run after the current stack and before the next macrotask or paint. Macrotasks include timers, many DOM events, and other host tasks. That is why Promise.then usually runs before setTimeout(0). Footgun: endless microtasks starve rendering.
react
8.What is reconciliation in React?
The process of comparing the previous tree to the next one to decide what to insert, update, or remove. Same type at a position updates; different type remounts. Keys give list items identity.
html
9.When should you use a link versus a button?
Links navigate with href (open in new tab, bookmarkable, crawlable). Buttons perform actions on the page. Do not fake either with divs unless you reimplement keyboard and accessibility fully.
css
10.What is the difference between content-box and border-box?
content-box: specified width/height size the content area; padding and border add outside. border-box: specified width/height include content, padding, and border—usually easier for column math and components.
javascript
11.What is a closure in JavaScript?
A function bundled with its lexical environment—the outer bindings it can still reach. Closures capture bindings, not frozen snapshots of values. Footgun: a long-lived callback that closes over a large object keeps that object alive for GC.
react
12.Why do list keys matter?
Keys preserve identity across renders so state and DOM attach to the correct items. Index keys break when you reorder or insert—inputs and local state glitch. Prefer stable IDs from data.
html
13.Why should a page have a single main landmark?
main identifies primary content and should appear once. It enables skip links and AT landmark navigation. Header/nav/footer sit outside main.
css
14.When do you use Flexbox versus Grid?
Flexbox is strong for one-dimensional distribution (rows or columns of components). Grid is strong for two-dimensional page/section layouts. Real UIs often combine both.
javascript
15.What is the difference between var, let, and const?
var is function-scoped and hoisted as undefined. let and const are block-scoped and stay in the temporal dead zone until initialized. const cannot rebind the identifier (object contents can still mutate). Prefer const by default, let when reassignment is needed.
react
16.What is the difference between props and state?
Props are inputs from the parent (read-only for the child). State is data the component owns and can update over time. Lift state to the closest common owner that needs to coordinate children.
html
17.How do you correctly label form controls?
Associate a label via for/id or wrap the control. Placeholder is a hint, not a label. Unlabeled inputs fail accessibility and often fail Testing Library role queries.
css
18.What do flex-grow, flex-shrink, and flex-basis do?
flex-basis is the initial main size before free space is distributed. flex-grow shares positive free space. flex-shrink reduces items when space is tight. Defaults matter—know flex: 1 shorthand implications.
javascript
19.What is the temporal dead zone?
From the start of a block until a let/const binding is initialized, accessing it throws ReferenceError. That gap is the TDZ. It prevents using bindings before their declaration runs.
react
20.What is a controlled input in React?
The input’s value is driven by React state via value + onChange. Uncontrolled inputs keep value in the DOM and use refs. Controlled forms make validation and programmatic resets easier.
html
21.What are the rules of thumb for img alt text?
Informative images need meaningful alt. Decorative images use empty alt (alt=""). Do not stuff keywords. Provide width/height or CSS aspect-ratio to limit CLS.
css
22.What is the difference between align-items and justify-content in Flexbox?
justify-content distributes along the main axis; align-items aligns on the cross axis. Direction depends on flex-direction. Interviewers often swap axis names—draw it.
javascript
23.How does this binding work in JavaScript?
this is set by the call site: default (undefined in strict, global in sloppy), method call (receiver), call/apply/bind, or new. Arrow functions do not have their own this—they capture lexical this. Footgun: extracting a method loses its receiver unless you bind it.
react
24.How does useState’s functional update work?
setState(prev => next) uses the latest queued state, avoiding stale closures when the next value depends on the previous one. Prefer it inside async handlers and effects that schedule updates.
html
25.What is the difference between section, article, and div?
div is generic styling/hook with no semantics. section is a thematic grouping with a heading. article is self-contained content that could stand alone (post, card widget).