Frontend Interview Questions

What is the difference between `var`, `let`, and `const`?

Explain closures in JavaScript. Give a practical example.

How does the JavaScript event loop work?

What is the difference between `==` and `===`?

Explain prototypal inheritance in JavaScript.

What are Promises? How do `async/await` relate to them?

What is the `this` keyword in JavaScript? How does its value get determined?

What is event delegation and why is it useful?

Explain the CSS Box Model.

What is the difference between Flexbox and CSS Grid? When would you use each?

What is CSS specificity and how is it calculated?

What are semantic HTML elements and why do they matter?

Explain the `position` property values in CSS and when to use each.

What is the critical rendering path?

What are CSS Custom Properties (CSS Variables) and how do they differ from preprocessor variables?

How do you make a website accessible? Name key practices.

What is the Virtual DOM and how does React use it?

Explain the difference between `useState` and `useReducer`. When would you choose one over the other?

What are React keys and why are they important?

What is `useEffect` and what are its common pitfalls?

When should you use `useMemo` and `useCallback`? When should you NOT?

What are React Server Components (RSC) and how do they differ from SSR?

What is prop drilling and how do you avoid it?

How do Error Boundaries work in React?

Explain React's reconciliation algorithm.

What is React.memo and when should you use it?

What is the difference between `interface` and `type` in TypeScript?

Explain generics in TypeScript with an example.

What are utility types in TypeScript? Name five and explain their use.

What is type narrowing in TypeScript?

What is the `unknown` type and how does it differ from `any`?

How do you type React component props in TypeScript?

What are Core Web Vitals and why do they matter?

What is code splitting and how do you implement it in React?

What causes layout thrashing and how do you avoid it?

How does lazy loading work and what are its trade-offs?

What is debouncing vs throttling? When would you use each?

How do you detect and fix memory leaks in a frontend application?

Explain the difference between `localStorage`, `sessionStorage`, and cookies.

What is CORS and how does it work?

What are Web Workers and when would you use them?

Explain the difference between `async`, `defer`, and normal script loading.

What is the Intersection Observer API and what are its use cases?

What is a Service Worker? How does it enable offline functionality?

What is the difference between `e.preventDefault()`, `e.stopPropagation()`, and `e.stopImmediatePropagation()`?

What are micro-frontends? When would you use them?

What is the BFF (Backend for Frontend) pattern?

How would you design a frontend application for offline-first usage?

Explain the different component composition patterns in React.

What is a design system? What makes a good one?

What is the testing pyramid and how does it apply to frontend?

How do you test React components effectively?

What is Mock Service Worker (MSW) and why use it over other mocking approaches?

What is visual regression testing and how do you implement it?

How do you test custom React hooks?