106 Frontend Essentials interview questions with answers
106 Frontend Essentials interview questions with detailed answers, sorted from basic to advanced. Free to practice, with progress saved automatically.
All Frontend Essentials interview questions
What is DOCTYPE? Why is it necessary?
What is semantic HTML? Why does it matter?
How does the App Router differ from the Pages Router in Next.js?
When should you use a Server Component vs a Client Component?
What types of caching does Next.js have?
What benefits does the next/image component provide?
What is SEO? Why does a frontend developer need to understand it?
What are the most important meta tags for SEO? How do you write an effective title and description?
How do CSR, SSR, and SSG affect SEO? How does Google crawl SPAs?
What are Core Web Vitals? How do they affect SEO rankings?
You just made a bad commit (wrong message or forgot a file). How do you fix it without creating a new commit?
Merge vs Rebase: when to use which? Explain the golden rule of rebasing.
Merging a feature branch into main, you hit a conflict where both sides refactored the same file. What is the safe resolution process?
Undoing a public commit already merged into main: revert vs reset — when to use which?
Where should a frontend store access tokens and refresh tokens?
How does the refresh token (silent refresh) flow work?
How do you auto-refresh the token when a request returns 401 (axios/fetch interceptor)?
What is XSS and how do you prevent it on the frontend?
What are CORS and preflight requests? Why do CORS errors happen?
What is the Same-Origin Policy?
Why is there no perfect place to store a token? (the XSS/CSRF trade-off)
Session (cookie) vs token (JWT) authentication — what is the difference?
What parts make up a JWT? Is the payload encrypted?
Which OAuth2 flow should a SPA use? What is PKCE?
Difference between `<script>`, `<script async>`, and `<script defer>`?
What is tree-shaking and what does it rely on?
What is a closure? Give a practical use case.
How is `this` determined in JavaScript? How do `call`, `apply`, and `bind` differ?
How does the event loop work? Microtasks vs macrotasks?
What is hoisting? How do `var`, `let`, and `const` differ in scope?
How does prototypal inheritance work in JavaScript?
Difference between `==` and `===`? Which should you use?
How do Promises differ from callbacks? What does `async/await` solve?
What are event bubbling, capturing, and event delegation?
How do debounce and throttle differ? When do you use each?
How do spread, rest, and destructuring (ES6+) work?
Difference between `map`, `filter`, and `reduce`?
Shallow copy vs deep copy — how do you deep-copy in JavaScript?
What happens when the browser renders a page? (critical rendering path, reflow/repaint)
Difference between cookies, localStorage, and sessionStorage?
What is the CSS box model? What does `box-sizing: border-box` solve?
How is CSS specificity calculated?
Flexbox vs Grid — what is the difference and when do you use each?
How do the `position` values (static/relative/absolute/fixed/sticky) differ?
How do `em` and `rem` differ? Which unit should you use?
What is the Virtual DOM and how does reconciliation work?
What is the `key` prop for in React lists? Why not use the index?
What are the Rules of Hooks? How does the `useEffect` dependency array work?
What is the difference between controlled and uncontrolled components?
CSR vs SSR vs SSG vs ISR — what is the difference?
What is the difference between `type` and `interface` in TypeScript? When do you use each?
What are generics in TypeScript? Why use a generic instead of `any`?
What do the common utility types (`Partial`, `Pick`, `Omit`, `Record`) do?
How do `React.lazy` and `<Suspense>` work?
What is a React error boundary? Which errors does it catch?
What is the Context API for? When should you use Context vs Redux?
What is React Query (TanStack Query)? How do `staleTime` and cache differ?
What techniques optimize images and assets on the frontend?
What are code splitting and dynamic `import()`? When should you split chunks?
How do ES Modules (ESM) and CommonJS (CJS) differ?
What is memoization? How do `useMemo`, `useCallback`, and `React.memo` differ?
How do primitive types and reference types differ in JavaScript?
How do arrow functions differ from regular functions?
What is the difference between `display: none`, `visibility: hidden`, and `opacity: 0`?
What is responsive design? How do media queries, mobile-first, and the viewport meta tag work?
How do Web Workers and Service Workers differ? When do you use each?
How does `fetch` differ from `XMLHttpRequest`? How do you cancel an in-flight request?
How does HTTP caching work for static assets? What are `Cache-Control`, ETags, and cache busting?
How do `useEffect` and `useLayoutEffect` differ? When do you need `useLayoutEffect`?
What is hydration? What causes hydration mismatch errors and how do you avoid them?
How do SPAs and MPAs differ? When do you choose each?
What causes a React component to re-render? How do you reduce unnecessary re-renders?
Compare React logic-reuse patterns: HOCs, render props, and custom hooks — why did hooks win?
What is the difference between `null` and `undefined`?
What are truthy/falsy values? List the falsy values in JavaScript.
What is the difference between `display: block`, `inline`, and `inline-block`?
What is the difference between props and state in React?
What are the common HTTP methods (GET/POST/PUT/PATCH/DELETE) and status code groups?
What problems do optional chaining `?.` and nullish coalescing `??` solve?
How do `Map` and `Set` differ from plain objects and arrays? When should you use them?
Difference between `Promise.all`, `allSettled`, `race`, and `any`?
Why is `0.1 + 0.2 !== 0.3`? What is `NaN` and how do you check for it?
What is `useRef` for? How does it differ from `useState`?
How does `useReducer` differ from `useState`? When should you choose it?
What is IntersectionObserver? Why is it better than listening to `scroll` events?
What is the difference between `any`, `unknown`, and `never` in TypeScript?
What happens from typing a URL in the browser to the page being displayed?
How does WebSocket differ from HTTP polling and Server-Sent Events (SSE)? When do you use each?
How does JavaScript manage memory and garbage collection? What are common memory leaks?
How would you implement infinite scroll (or pagination) for a long list?
How do you build a search box with debounce that cancels stale requests so an old response cannot overwrite a newer one?
What is an optimistic update and how do you roll back when the request fails?
How do you handle protected routes and client-side auth state (redirect when unauthenticated, avoiding a content flash)?
How do you handle the loading / error / empty states of a data-fetching view?
How would you build a complex form with validation and autosave/draft?
How do you handle errors and retries when fetching data (error boundary, backoff, network vs 4xx/5xx)?
Why does state still show the old value right after calling `setState`? How does batching work in React?
How does Redux work: how do store, actions, reducers, and middleware fit together?
How would you design a frontend file-upload flow (preview, progress, cancel, large files)?
What are Core Web Vitals (LCP, INP, CLS)? How do you measure and improve them?
What are the ways to center an element with CSS (center a div)?
What is CSRF and how do you prevent it?
When do you use a Server Action versus writing a Route Handler (`route.ts`)?
Where does Next.js middleware run, what are its limits, and should it be your only authorization layer?
What does the `NEXT_PUBLIC_` prefix mean for environment variables? Why does misusing it leak secrets?
A component using a charting library throws `window is not defined` at build time. How does `dynamic(..., { ssr: false })` fix it, and what are the trade-offs?
