JavaScript
1. Explain the event loop, microtasks, and macrotasks.
Synchronous code runs first. Then the microtask queue drains completely (promises, queueMicrotask), then one macrotask runs (setTimeout, I/O). Repeat. This is why a Promise.resolve().then() runs before a setTimeout(_, 0).
React
2. What is the difference between useMemo, useCallback, and React.memo?
useMemo caches a computed value, useCallback caches a function reference, React.memo skips re-rendering a component when props are referentially equal. Most apps overuse all three — the right default is to not memoize, and add it when you have measured a problem.
CSS
3. Center a div horizontally and vertically — give three ways.
Flexbox (display: flex; place-items: center). Grid (display: grid; place-items: center). Absolute positioning with transform translate(-50%, -50%). The interviewer is checking that you reach for modern layout first.
Performance
4. A page has a 6-second LCP. Walk me through how you fix it.
Run Lighthouse. Inspect the LCP element. Common causes: large hero image without optimization, render-blocking JS, slow TTFB, late-discovered resources. Fix priority: preload critical resources, defer non-critical JS, optimize images (WebP/AVIF, responsive srcset), and reduce server response time.
Accessibility
5. How do you make a custom dropdown accessible?
Use semantic HTML where possible (<select> if the design allows). For custom: role="listbox", aria-activedescendant, keyboard handling (arrows, Enter, Esc), focus management, and screen reader testing. Cite the WAI-ARIA Authoring Practices.
React
6. What is the difference between server and client components in Next.js?
Server components run only on the server, can fetch data directly, and never ship JavaScript to the client. Client components ship JS, can use hooks and browser APIs. The boundary is the "use client" directive. Default to server; opt into client only when you need interactivity.