Frontend Interview Help — AI for JavaScript, React, CSS & UI Builds

1. JavaScript & DOM fundamentals

Closures, the event loop, this binding, promises and async/await, debounce/throttle, event delegation, and prototypal inheritance. Often "implement Promise.all" or "build a debounce." The AI returns a correct implementation plus the one-line "why" you'll be asked.

2. React / framework round

Hooks (useState, useEffect, useMemo, custom hooks), reconciliation and keys, controlled vs uncontrolled inputs, context vs state libraries, and re-render performance. The AI flags the common traps: stale closures in effects, missing dependency arrays, and unnecessary re-renders.

3. Machine-coding / UI build

Build a working component live: a typeahead/autocomplete, a star rating, an accessible modal, an infinite-scroll list, or a todo app. Graded on correctness, edge cases, accessibility, and clean state. The AI scaffolds the component structure and reminds you about keyboard handling and ARIA.

4. Frontend system design

"Design a news feed / autocomplete / image carousel at scale." Graded on component architecture, data fetching and caching, rendering strategy (SSR/CSR/streaming), and performance budgets. The AI lays out the standard structure so you cover state, network, and rendering layers.

• What is a closure, and where would you use one? A closure is a function that retains access to its lexical scope after the outer function returns. Name a real use — a private counter, a memoized cache, or the per-call state inside a debounce — not just the textbook definition.
• Explain the event loop and the difference between microtasks and macrotasks. The call stack runs to empty, then the loop drains all microtasks (promise callbacks, queueMicrotask) before the next macrotask (setTimeout, I/O), which is why a resolved promise fires before a setTimeout(0).
• Implement debounce (or throttle). Debounce delays the call until activity stops by clearing and resetting a timer on each invocation; throttle caps it to once per interval. Mention preserving this and arguments via the closure.
• Why do React lists need a stable key, and why not the array index? Keys let the reconciler match elements across renders; using the index reuses the wrong DOM node when the list reorders or items are inserted, causing state to attach to the wrong row.
• What causes an unnecessary re-render, and how do you stop it? A parent re-render, a changed prop/state, or a new function/object identity each render. Fixes: lift or memoize with useMemo/useCallback, wrap pure children in React.memo, and keep dependency arrays correct to avoid stale closures.
• How do you center an element and choose between Flexbox and Grid? For one-dimensional alignment use Flexbox (display:flex; align-items:center; justify-content:center); for two-dimensional row-and-column layouts use Grid. Centering both axes is a one-liner in either — explain the dimensionality reason for your pick.
• A page feels slow — how do you diagnose and fix it? Work the critical path: measure Core Web Vitals (LCP, CLS, INP), then code-split and lazy-load, compress and right-size images, virtualize long lists, and cut main-thread work and re-renders.