Frontend Development Rapid-Fire Questions &amp; Answers

Show answer

TypeScript is a superset of JavaScript that adds static types and compiles to plain JavaScript. It catches errors such as wrong property names, missing arguments and null access while you type, before the code runs. It also improves editor autocomplete and makes refactoring large codebases safer. Types are erased at runtime, so TypeScript adds no performance cost but needs a build or type-stripping step.

Explain dependencies, devDependencies and peerDependencies.

Show answer

dependencies are packages needed at runtime, such as a charting library. devDependencies are used only during development and build, like Vite, ESLint, TypeScript and test runners. peerDependencies are declared by libraries that expect the host project to provide a package, for example a React component library listing react as a peer, which avoids shipping two copies. For bundled frontend apps, the split mainly documents intent and affects installs.

How does destructuring with default values work?

Show answer

Destructuring pulls values out of arrays or objects into variables. Defaults apply only when the value is undefined, not when it is null. For example, const { name, city = 'Delhi' } = user sets city to Delhi if the property is missing. Function parameters can be destructured too, like function render({ title, size = 'md' } = {}), which avoids errors when no argument is passed and documents expected options clearly.

Does native CSS support nesting now?

Show answer

Yes. All modern browsers support native CSS nesting, so you can write .card { padding: 1rem; & .title { font-weight: 600; } &:hover { box-shadow: ... } } without Sass. The ampersand refers to the parent selector. Deep nesting still creates high specificity and long selectors, so the usual advice from Sass days applies: keep nesting to one or two levels.

What colour contrast ratios does WCAG require?

Show answer

WCAG 2.2 level AA requires a contrast ratio of at least 4.5 to 1 for normal text and 3 to 1 for large text, which is about 24 pixels regular or 19 pixels bold. Interface components and focus indicators need 3 to 1 against adjacent colours. Level AAA raises text to 7 to 1. Tools like the DevTools contrast checker help catch light grey text that fails these limits.

What is the difference between local UI state, global state and server state?

Frontend ArchitectureMedium

Show answer

Local state belongs to one component, like whether a dropdown is open. Global client state is shared across the app, like theme or the logged-in user. Server state is data owned by the backend, such as orders, that must be fetched, cached, refreshed and kept in sync. Treating server state separately with tools like TanStack Query removes much of the code teams once wrote in global stores.

How does the History API enable client-side routing?

Browser APIsMedium

Show answer

history.pushState(state, '', '/courses/react') changes the URL and adds a history entry without reloading the page, and replaceState updates the current entry. When users press back or forward, the popstate event fires and the app renders the matching view. The server must return the app's HTML for all routes, otherwise refreshing a deep link gives a 404. Routers in SPA frameworks are built on this API.

Which tsconfig options are important for a strict codebase?

TypeScriptMedium

Show answer

strict: true enables a family of checks, including strictNullChecks and noImplicitAny, and should be on for new projects. noUncheckedIndexedAccess adds undefined to array and record lookups, catching many runtime errors. exactOptionalPropertyTypes, noImplicitOverride and noFallthroughCasesInSwitch add more safety. For bundler-based apps, moduleResolution: bundler, isolatedModules and verbatimModuleSyntax keep TypeScript aligned with how tools like Vite compile code.

How do environment variables work in frontend builds, and what is the risk?

Build Tools and ToolingMedium

Show answer

Build tools replace variables at build time, for example Vite exposes only variables prefixed with VITE_ through import.meta.env. The values become plain text inside the JavaScript bundle that anyone can read. So frontend environment variables must never hold secrets like private API keys or database passwords; those belong on a server or backend proxy. Use them only for public configuration such as API base URLs.

What is transpilation and how does browserslist control it?

Build Tools and ToolingMedium

Show answer

Transpilation converts modern JavaScript or TypeScript into syntax that target browsers understand. Tools include Babel, SWC and esbuild. A browserslist setting, such as '> 0.5%, last 2 versions, not dead', or a build target like es2020, decides which features need conversion and which polyfills to include. Targeting only modern browsers produces smaller, faster code, so the support list should be based on real analytics.

What are union and intersection types?

Show answer

A union type A | B means the value can be either type, such as string | number or 'success' | 'error'. You must narrow it before using type-specific members. An intersection type A & B combines all properties of both, for example User & { permissions: string[] } adds a field to an existing type. Unions model alternatives, while intersections model composition of features.

Why are dvh and svh units better than vh on mobile?

Show answer

On mobile browsers, 100vh equals the height with the address bar hidden, so a full-screen section gets cut off when the bar is visible. svh is the small viewport height with browser UI shown, lvh the large one, and dvh updates dynamically as the bar appears or hides. Using min-height: 100dvh for hero sections or app shells prevents content hiding behind browser chrome.

What is prefers-reduced-motion and why should you respect it?

Show answer

prefers-reduced-motion is a media query that detects when users have asked their operating system to minimise animation, often because motion causes dizziness or nausea. Inside @media (prefers-reduced-motion: reduce), you should remove or tone down parallax, large transitions and auto-playing animations, while keeping essential feedback such as simple fades. It is a small change that makes interfaces accessible to people with vestibular disorders.

What is a Progressive Web App?

Browser APIsEasy

Show answer

A Progressive Web App is a website that behaves like an installable app. It needs HTTPS, a web app manifest with name, icons and theme colour, and usually a service worker for offline support and caching. Users can add it to their home screen and it opens in a standalone window. PWAs are popular in India for lightweight apps that work on low-end phones and patchy mobile networks.

What does the :has() selector allow you to do?

CSS Architecture and AccessibilityMedium

Show answer

:has() is often called the parent selector because it styles an element based on what it contains or what follows it. For example, .card:has(img) can change padding for cards with images, and form:has(input:invalid) can highlight a form with errors. It removes many cases where JavaScript was used only to toggle classes. It is supported in all modern browsers.

How do you choose the right image format and size?

Web PerformanceEasy

Show answer

Use AVIF or WebP for photos because they are much smaller than JPEG at similar quality, with JPEG as fallback. Use SVG for icons and logos, and PNG only when lossless transparency is essential. Serve sizes that match the display width with srcset and sizes, compress with tools like Squoosh or an image CDN, and always specify width and height to avoid layout shift.

Explain optional chaining and the nullish coalescing operator.

Show answer

Optional chaining ?. stops evaluation and returns undefined if the value before it is null or undefined, so user?.address?.pincode never throws. Nullish coalescing ?? returns the right side only when the left is null or undefined, unlike || which also replaces 0, false and empty strings. For example, const qty = input ?? 1 keeps a valid 0, while input || 1 would wrongly change 0 into 1.

Why are many teams moving from Jest to Vitest?

Frontend TestingMedium

Show answer

Vitest reuses the Vite configuration and transform pipeline, so TypeScript, JSX, ES modules and path aliases work without separate Babel or ts-jest setup. It is fast thanks to on-demand transformation and smart watch mode, and its API is largely compatible with Jest, making migration easy. Jest remains mature and widely used, especially in projects not built with Vite. Both support mocking, snapshots and coverage.

Why does await inside forEach not wait for each item?

Modern JavaScriptMedium

Show answer

forEach ignores the promise returned by an async callback, so all callbacks start almost at once and forEach finishes before any await completes. Code after it runs too early. For sequential processing, use a for...of loop with await inside. For parallel processing with a final result, use await Promise.all(items.map(async item => ...)). Choosing between them depends on whether order and rate limits matter.

How does client-side rendering affect SEO and social sharing?

Frontend ArchitectureEasy

Show answer

With pure client-side rendering, the initial HTML is mostly empty and content appears after JavaScript runs. Google can render JavaScript, but it happens later and less reliably, while many social media link previewers and some search engines do not run JavaScript at all, so titles and images are missing. Server rendering or prerendering important pages ensures content and meta tags are in the initial HTML.

What is the difference between ES modules and CommonJS?

Show answer

ES modules use import and export, are statically analysable, load asynchronously and are the standard in browsers and modern Node. CommonJS uses require and module.exports, loads synchronously and was Node's original system. Because ES module imports are static, bundlers can tree-shake unused exports, which shrinks bundles. Mixing the two causes interop issues, so new frontend projects use ES modules with type: module in package.json.

Compare SPA, MPA, server-side rendering and static site generation.

Frontend ArchitectureEasy

Show answer

A single-page app loads once and renders views in the browser, giving app-like navigation but slower first load. A multi-page app renders each page on the server with full reloads. Server-side rendering generates HTML per request for fast content and SEO, then hydrates. Static site generation pre-builds HTML at build time and serves it from a CDN, which is fastest for content that changes rarely, like blogs.

How do HTTP/2 and HTTP/3 change frontend bundling strategy?

Web PerformanceHard

Show answer

HTTP/1.1 allowed few parallel requests per domain, so developers concatenated everything into one big bundle and used domain sharding. HTTP/2 multiplexes many requests over one connection, and HTTP/3 runs over QUIC to avoid head-of-line blocking on lossy mobile networks. This makes moderate chunk splitting efficient and improves caching, because changing one module invalidates only its chunk. Still, too many tiny files add overhead.

How does Tailwind CSS keep the final CSS file small?

Show answer

Tailwind scans your source files for class names and generates only the utilities you actually use, so the production CSS is usually a few kilobytes even though thousands of utilities are available. This requires class names to appear as complete strings in the code. Tailwind v4 uses a CSS-first configuration with @theme for design tokens and detects source files automatically.

Compare IntersectionObserver, ResizeObserver and MutationObserver.

Browser APIsMedium

Show answer

IntersectionObserver reports when an element enters or leaves the viewport or a container, used for lazy loading, infinite scroll and analytics impressions. ResizeObserver reports changes to an element's size, useful for charts that must redraw when their container changes. MutationObserver reports DOM changes like added nodes or changed attributes. All three are asynchronous and far more efficient than polling or scroll and resize listeners.

What is the difference between type and interface in TypeScript?

Show answer

Both describe object shapes. An interface can be extended with extends and merged by declaring it twice, which libraries use to let users augment types. A type alias can describe anything, including unions, tuples, primitives and mapped types, and combines with intersections. For plain object shapes either works; many teams use interface for public object contracts and type for unions and computed types.

Why use requestAnimationFrame instead of setTimeout for animations?

Browser APIsEasy

Show answer

requestAnimationFrame runs your callback right before the browser paints the next frame, usually 60 or 120 times per second matching the display. It pauses in background tabs, saving battery, and avoids the drift and dropped frames that setTimeout causes because timers are not synced with rendering. The callback receives a high-precision timestamp, so animations can be calculated from elapsed time rather than fixed steps.

When should you use Map and Set instead of plain objects and arrays?

Show answer

Map allows keys of any type, keeps insertion order, has a size property and performs well with frequent additions and deletions, so it suits caches and lookups by object. Set stores unique values with fast has() checks, ideal for tracking selected ids. Plain objects are better for fixed-shape records and JSON. Arrays are better when order and index access matter and duplicates are allowed.

What is the difference between unit, integration and end-to-end tests?

Frontend TestingEasy

Show answer

A unit test checks a single function or module in isolation, such as a price formatter. An integration test checks several pieces working together, like a form component with validation and an API call mocked at the network level. An end-to-end test drives a real browser through a complete user flow, such as signup to dashboard, against a running app. They trade speed for realism in that order.

What do caret and tilde mean in package versions, and why commit the lockfile?

Show answer

Versions follow semantic versioning: major.minor.patch. ^1.4.2 allows any 1.x.x version at or above 1.4.2, and ~1.4.2 allows only patch updates within 1.4.x. Because ranges can resolve differently over time, the lockfile, such as package-lock.json or pnpm-lock.yaml, records exact installed versions. Committing it and using npm ci in CI ensures every developer and build uses identical dependencies.

What are source maps and should they be deployed to production?

Show answer

Source maps link minified production code back to the original source files and line numbers, so DevTools and error trackers show readable stack traces. They are generated by the bundler as .map files. Many teams upload them privately to monitoring tools like Sentry and do not serve them publicly, which keeps original source code less exposed while still allowing debugging of production errors.

What does component-driven development mean?

Frontend ArchitectureMedium

Show answer

Component-driven development builds UIs from the bottom up as small, reusable, isolated components, such as buttons and inputs, composed into larger patterns like forms and pages. Each component has a clear API through props or attributes and is developed and documented in isolation, often in Storybook. Composition over configuration keeps components flexible. This approach enables design systems, parallel work and easier testing.

What are the pros and cons of snapshot testing?

Frontend TestingMedium

Show answer

Snapshot tests save a component's rendered output and fail when it changes, which quickly detects unintended changes with little effort. However, large snapshots are hard to review, so developers often update them blindly, and they break on harmless markup changes. They work best for small, stable outputs like serialised config or error messages. For UI behaviour, explicit assertions on visible text and roles are more meaningful.

Compare CSS Modules, CSS-in-JS and utility-first CSS.

CSS Architecture and AccessibilityMedium

Show answer

CSS Modules scope class names per file at build time, giving plain CSS with no runtime cost. CSS-in-JS libraries write styles in JavaScript with dynamic props, but runtime versions add bundle size and slow server rendering, so zero-runtime options are now preferred. Utility-first frameworks like Tailwind compose small classes in markup, producing small CSS and consistent spacing. The choice depends on team preference and rendering strategy.

Compare npm, pnpm and Yarn.

Show answer

npm comes with Node and is the default. pnpm stores each package version once in a global content-addressable store and links it into projects, saving disk space and installing faster, and its strict node_modules layout prevents using undeclared dependencies. Yarn offers workspaces and Plug'n'Play mode. All three support workspaces for monorepos. pnpm has become very popular for large projects because of speed and strictness.

What is a JavaScript bundler and why do frontend projects need one?

Show answer

A bundler takes your source files, follows imports to build a dependency graph and outputs optimised files for the browser. Along the way it transpiles TypeScript and JSX, processes CSS, handles images, minifies code, removes unused exports and adds content hashes for caching. Native ES modules work in browsers, but loading hundreds of unoptimised files is slow, so production builds still use bundlers like Vite, webpack or Rspack.

At a high level, how does React's virtual DOM and reconciliation work?

Frontend ArchitectureEasy

Show answer

React components return a description of the UI as a tree of elements. When state changes, React renders a new tree and compares it with the previous one, a process called reconciliation, then applies only the minimal DOM changes needed. Keys help it match list items correctly. The React Compiler now adds automatic memoisation, reducing unnecessary re-renders without manual useMemo calls.

Explain any, unknown and never.

TypeScriptMedium

Show answer

any turns off type checking completely, so errors slip through silently. unknown also accepts any value, but you must narrow it with typeof, instanceof or a type guard before using it, which makes it the safe choice for API responses and catch errors. never represents values that never occur, such as a function that always throws, or the leftover case in an exhaustive switch over a union.

What is Hot Module Replacement?

Show answer

Hot Module Replacement updates changed modules in the running app without a full page reload, so you keep current state such as an open modal or form input while editing code. The dev server watches files, sends the update over a WebSocket, and the framework plugin swaps the module. CSS updates apply instantly. If a change cannot be applied safely, the dev server falls back to a full reload.

What are higher-order functions and currying?

Show answer

A higher-order function takes a function as an argument or returns one, like map, filter or a custom withLogging(fn) wrapper. Currying transforms a function with many arguments into a chain of single-argument functions, so add(2)(3) returns 5. Currying makes partial application easy, for example creating formatINR = formatCurrency('INR') once and reusing it. Overusing it can reduce readability for teams unfamiliar with functional style.

What are pure functions and why does immutability matter in frontend code?

Show answer

A pure function returns the same output for the same input and has no side effects such as changing external variables. Immutability means creating new objects instead of modifying existing ones, for example using spread syntax to update state. Together they make code predictable and easy to test, and they let frameworks detect changes with a simple reference comparison, which enables efficient re-rendering.

What is the guiding principle of Testing Library and why query by role?

Frontend TestingMedium

Show answer

Testing Library encourages testing the way users interact: find elements by what they see and hear, not by implementation details like class names or component internals. getByRole('button', { name: 'Submit' }) is preferred because it also verifies the element is accessible. Tests written this way survive refactors and catch real accessibility problems. Test ids are a last resort when no accessible query works.

How do HTTP caching headers work for frontend assets?

Web PerformanceMedium

Show answer

Cache-Control controls caching. Files with content hashes in their names, like app.3f9a2c.js, can use max-age=31536000, immutable because a new build produces a new filename. HTML should use no-cache, which forces revalidation so users get new asset references after a deploy. ETag and Last-Modified allow cheap revalidation with 304 Not Modified responses. Wrong headers cause either stale apps or needless re-downloads.

Explain preload, prefetch and preconnect.

Web PerformanceMedium

Show answer

preconnect opens an early connection, including DNS, TCP and TLS, to an important third-party origin like a font or API server. preload fetches a resource needed for the current page at high priority, such as the hero image or main font. prefetch downloads resources likely needed for the next navigation at low priority during idle time. Overusing preload wastes bandwidth and can delay more critical resources.

What is the testing pyramid, and how does the testing trophy differ?

Frontend TestingEasy

Show answer

The testing pyramid suggests many fast unit tests, fewer integration tests and very few slow end-to-end tests. The testing trophy, popular for frontend work, puts most effort into integration tests that render components with real behaviour, supported by static analysis like TypeScript and ESLint at the base. Both aim for confidence at reasonable cost; the trophy reflects that UI bugs often appear where units connect.

Explain the utility types Partial, Pick, Omit and Record.