Frontend Developer Interview Help: React, JavaScript, and CSS Deep Dive

What Frontend Interviews Test in 2026

Frontend interviews have evolved significantly. It is no longer just "can you center a div?" Companies want engineers who understand React internals, JavaScript engine behavior, CSS architecture, web performance, accessibility standards, and modern tooling. The breadth catches many experienced developers off guard.

JavaScript Fundamentals (Still Critical)

1. Explain the event loop, call stack, and task queue.

Call stack executes synchronous code. When async operations complete, callbacks go to the task queue (macrotasks) or microtask queue (promises). Event loop moves tasks to call stack when it is empty. Microtasks have priority over macrotasks.

2. What is closure and give a practical example.

A function that remembers variables from its outer scope even after the outer function has returned. Practical uses: data privacy, factory functions, memoization, event handlers that need context.

3. Explain prototypal inheritance.

Objects inherit from other objects via the prototype chain. Every object has a __proto__ linking to its prototype. Property lookup walks up the chain. Class syntax is sugar over prototypes.

4. What is the difference between var, let, and const?

var is function-scoped and hoisted. let and const are block-scoped. const prevents reassignment (not mutation of objects). let allows reassignment. Never use var in modern code.

5. Explain Promise, async/await, and error handling patterns.

Promises represent eventual values. async/await is syntactic sugar for promise chains. Try/catch for error handling in async functions. Promise.all for parallel execution, Promise.allSettled when you need all results regardless of failures.

React Questions

6. Explain the React rendering cycle.

State/prop change triggers re-render. React creates new virtual DOM, diffs with previous (reconciliation), computes minimal DOM updates, commits changes. Fiber architecture enables concurrent rendering.

7. When do you use useMemo vs useCallback vs React.memo?

useMemo: memoize expensive computed values. useCallback: memoize function references (prevents child re-renders). React.memo: skip re-rendering a component if props haven't changed. Don't overuse — premature optimization adds complexity.

8. Explain React Server Components.

Components that render on the server and send HTML to the client. No client-side JavaScript bundle. Can directly access databases and file systems. Mixed with client components using "use client" directive. Reduces bundle size significantly.

9. How do you manage state in a large React application?

Local state (useState) for component-specific state. Context for cross-cutting concerns (theme, auth). Server state (React Query/SWR) for API data. Global state (Zustand/Redux) sparingly for truly global state. Avoid over-centralizing.

10. What are the rules of hooks and why do they exist?

Only call hooks at the top level (not inside loops/conditions). Only call hooks from React functions. These rules exist because React relies on call order to match hooks with their state. Violating them breaks the internal state mapping.

CSS and Layout Questions

11. Explain CSS specificity.

Inline styles > IDs > classes/attributes/pseudo-classes > elements/pseudo-elements. !important overrides everything (avoid it). Equal specificity: last rule wins. Understanding this prevents style debugging nightmares.

12. Flexbox vs Grid — when do you use each?

Flexbox for one-dimensional layouts (row OR column). Grid for two-dimensional layouts (rows AND columns). Flexbox for component internals (navbar items, card content). Grid for page layouts and complex arrangements.

13. How do you implement responsive design?

Mobile-first approach, fluid typography (clamp()), responsive images (srcset), CSS Grid with auto-fit/auto-fill, container queries for component-level responsiveness, media queries for breakpoints.

14. What is CSS-in-JS and what are the trade-offs?

Styles defined in JavaScript (styled-components, Emotion). Benefits: scoped styles, dynamic styling, co-located code. Drawbacks: runtime cost, larger bundle, SSR complexity. Alternatives: Tailwind CSS, CSS Modules.

15. Explain the CSS box model.

Content > padding > border > margin. box-sizing: border-box includes padding and border in width/height (preferred). Default content-box does not. Understanding this prevents layout bugs.

Performance Questions

16. How do you optimize React application performance?

Code splitting (React.lazy), virtualization for long lists (react-window), memoization where needed, avoiding unnecessary re-renders, optimizing images, tree shaking, bundle analysis.

17. Explain Core Web Vitals.

LCP (Largest Contentful Paint): loading performance. INP (Interaction to Next Paint): responsiveness. CLS (Cumulative Layout Shift): visual stability. These affect SEO and user experience.

18. What is code splitting and how do you implement it?

Breaking the bundle into smaller chunks loaded on demand. React.lazy() + Suspense for component-level splitting. Route-based splitting for page-level. Dynamic import() for feature-level.

Accessibility Questions

19. What are ARIA attributes and when should you use them?

Accessible Rich Internet Applications — attributes that add semantics for assistive technologies. Use native HTML elements first (they have built-in accessibility). ARIA is for custom components where native elements are insufficient.

20. How do you ensure keyboard accessibility?

All interactive elements focusable (tabindex), logical focus order, visible focus indicators, keyboard event handlers (Enter/Space for buttons, Escape to close modals), skip navigation links, focus trapping in modals.

AI-Powered Frontend Interview Prep

Frontend interviews test an enormous range — from JavaScript engine internals to CSS specificity to React architecture patterns. Craqly's AI assistant provides real-time reminders of specific details during your interview, so you can focus on demonstrating your problem-solving ability rather than worrying about forgetting exact API signatures.

Practice with Craqly's AI interview copilot using frontend-specific questions to get comfortable with the workflow before a real interview.