Interview Questions

`var` is function-scoped and can be redeclared. `let` and `const` are block-scoped. `const` cannot be reassigned after declaration, while `let` can be.

A closure is a function that has access to variables in its outer (enclosing) lexical scope, even after the outer function has returned. Closures are created every time a function is created.

Event delegation is a pattern where you attach a single event listener to a parent element instead of multiple listeners to child elements. It uses event bubbling to handle events from child elements.

Promises represent the eventual completion or failure of an asynchronous operation. They have three states: pending, fulfilled, or rejected. Use `.then()` for success and `.catch()` for errors.

Hooks are functions that let you use state and other React features in functional components. Common hooks include useState, useEffect, useContext, useMemo, and useCallback.

The Virtual DOM is a lightweight copy of the actual DOM. React uses it to optimize updates by comparing the virtual DOM with the real DOM and only updating what changed (reconciliation).

useEffect runs after the browser paints, while useLayoutEffect runs synchronously after DOM mutations but before the browser paints. Use useLayoutEffect when you need to measure DOM nodes or make visual changes.

Context provides a way to pass data through the component tree without having to pass props down manually at every level. It's useful for global data like themes, user info, or language preferences.

Generics allow you to write reusable code that works with multiple types while maintaining type safety. They're denoted with angle brackets like `<T>` and act as type variables.

Interfaces can be extended and merged, making them better for object shapes and classes. Types are more flexible and can represent unions, intersections, and primitives. Prefer interfaces for object shapes.

`any` disables type checking completely. `unknown` is type-safe - you must narrow the type before using it. Always prefer `unknown` over `any` when the type is truly unknown.

TypeScript provides built-in utility types like Partial<T>, Required<T>, Pick<T, K>, Omit<T, K>, Record<K, T>, etc. They help transform types without rewriting them.

Lazy loading defers loading of non-critical resources until needed. Code splitting breaks your bundle into smaller chunks loaded on demand, improving initial load time. Use React.lazy() and dynamic imports.

The sequence of steps the browser takes to render a page: DOM construction, CSSOM construction, render tree creation, layout, and paint. Optimize by minimizing render-blocking resources.

Core Web Vitals are metrics that measure user experience: LCP (Largest Contentful Paint), FID (First Input Delay), and CLS (Cumulative Layout Shift). They impact SEO and user satisfaction.

Use modern formats (WebP, AVIF), responsive images with srcset, lazy loading, proper sizing, compression, and CDNs. Next.js Image component handles most of this automatically.

Specificity determines which CSS rule applies when multiple rules target the same element. Calculated by: inline styles (1000), IDs (100), classes/attributes/pseudo-classes (10), elements/pseudo-elements (1).

Flexbox is for one-dimensional layouts (row or column). Grid is for two-dimensional layouts (rows and columns). Use Flexbox for navigation bars, Grid for page layouts.

CSS variables let you store values for reuse. Define with `--variable-name` and use with `var(--variable-name)`. They cascade and can be changed with JavaScript, unlike preprocessor variables.

The box model consists of content, padding, border, and margin. By default, width/height only apply to content. Use `box-sizing: border-box` to include padding and border in the dimensions.

Use component-based architecture, state management (Redux/Zustand), code splitting, lazy loading, CDN for assets, caching strategies, error boundaries, monitoring, and progressive enhancement.

Local state (useState), Context API (light global state), Redux (predictable state container), Zustand (simple stores), Recoil (atomic state), React Query (server state). Choose based on complexity.

SSR generates HTML on the server for each request, improving SEO and initial load. Next.js supports SSR with getServerSideProps. Contrast with Static Site Generation (SSG) which builds at build time.

Use JWT tokens stored in httpOnly cookies or localStorage, implement refresh tokens, protected routes, auth context/provider, and consider OAuth providers. Always validate on the server side.