🎨Frontend Developer

The virtual DOM is React's in-memory tree representation of the UI. On state change React re-renders to a new tree, diffs it against the previous one (reconciliation), and applies only the minimal real-DOM mutations. Keys help it match list items correctly. This batches updates efficiently while letting developers write declarative UI code.

Hooks such as useState, useEffect and useContext let function components hold state and side effects without classes. They were introduced to reuse stateful logic across components, avoid wrapper hell and confusing this and lifecycle semantics, and enable better tree-shaking and typing. Remember the rules of hooks: top-level calls only, with exhaustive effect dependencies.

useState: simple per-component state with direct setters, ideal for independent primitives and toggles. useReducer: centralizes transitions in a reducer function with dispatched actions, better for related fields, state machines, and testable update logic. Reach for useReducer when updates depend on previous state or multiple sub-values change together.

The dependency array declares every reactive value the effect reads, and React reruns the effect after render whenever one changes, with an empty array running setup once. The returned cleanup function disposes subscriptions, timers, and abortable fetches before the next run and on unmount. Keep effects narrow, list honest dependencies, and satisfy the exhaustive-deps lint rule.

useMemo: caches a computed value and recomputes only when dependencies change, ideal for expensive derivations and stable object identities. useCallback: caches a function instance itself, useful when passing callbacks to memoized children or effect dependencies. Profile first since needless memoization adds complexity without measurable wins.

Refs hold mutable values that persist across renders without triggering rerenders, such as DOM nodes, timers, interval ids, and previous-value snapshots. They power focus management, scroll measurement, and imperative animations alongside callback refs for dynamic attachment. Never read or write refs during render since that breaks concurrent rendering guarantees.

Prop drilling threads data through uninterested layers, so lift shared UI state into Context providers or compose with children and slots to keep intermediate components unaware. Context suits theme, locale, and auth identity while composition with render props or slots suits layout reuse. Split contexts by concern so one changing value does not rerender every consumer.

Controlled: React state owns the input value with onChange updates, giving live validation, formatting, and disable logic at the cost of renders per keystroke. Uncontrolled: the DOM owns the value and React reads it via refs on submit, simpler for one-shot forms and file inputs. Prefer controlled for validated flows and uncontrolled for simple capture forms.

Keys tell the reconciler which element corresponds to which prior item so state, focus, and animations survive reordering, filtering, and insertion. Stable unique ids from data preserve identity while array indices break on reorder and cause swapped state or lost focus. Mention keying by route or query to reset component state deliberately.

Error boundaries are class components or library wrappers that catch render-time crashes in their subtree and show fallback UI instead of unmounting the whole tree. Place them per route and per risky widget so one failing chart cannot blank the page, and report caught errors with component stacks to tracking. Note they miss event-handler and async errors, which need try catch plus explicit state.

React lazy splits heavy components into separate chunks loaded on demand while Suspense declares loading fallbacks for whatever is still resolving. Apply it to routes, modals, and below-the-fold widgets so the initial bundle stays lean, and pair with prefetch on hover or viewport entry. Handle load failures with error boundaries plus retry affordances.

Server Components: render on the server with direct backend access, zero client JavaScript for their output, and streaming delivery, ideal for data-heavy static regions. Client Components: hydrate in the browser for interactivity, effects, and browser APIs at bundle cost. Compose static server shells around small interactive client islands to minimize shipped JavaScript.

Portals render children into a different DOM node, such as document body, while preserving React context and event bubbling through the component tree. They solve stacking, overflow clipping, and positioning problems for modals, tooltips, and dropdowns. Manage focus trapping, escape dismissal, and scroll locking for accessible overlays.

Forwarding refs plus an imperative handle lets a parent trigger focused child actions like focus, scroll, or reset without reaching into internals. Keep the exposed surface tiny and documented, preferring declarative props for everything else. Overuse recreates the tight coupling React composition tries to remove.

Centralize truly shared domain state in a typed store with selectors so components subscribe only to the slices they render. Normalize entities, keep server cache in a query library instead of the store, and colocate actions with reducers for traceable updates. Measure rerenders with DevTools and split selectors when broad subscriptions cause churn.

Transitions mark non-urgent updates such as filtering large lists so typing and navigation stay fluid while React renders the new state in the background. urgent state updates immediately, deferred values lag gracefully, and Suspense boundaries show pending affordances. Apply to search-as-you-type, tab switches, and heavy list renders.

StrictMode double-invokes renders, effects setup and cleanup, and strict-safety checks in development to surface impure logic, missing cleanups, and legacy API use. It never affects production bundles but failures under it predict real bugs in concurrent rendering. Fix flagged effects by making setup idempotent with proper teardown.

Render components as users experience them, querying by role and text rather than implementation details, then assert visible outcomes and interactions. Mock network boundaries, test loading and error states, and keep tests deterministic with fake timers. High value comes from behavior coverage of critical flows, not snapshot volume.

Web components: framework-agnostic custom elements with shadow encapsulation that run anywhere at the cost of sparse ecosystem and manual state wiring. React components: rich ecosystem with declarative state, concurrent rendering, and tooling, coupled to React runtimes. Wrap shared primitives as web components when multiple frameworks must consume them.

Flexbox lays out in one dimension (row or column) and excels at distributing space and aligning items within a line, ideal for navbars and card rows. Grid lays out in two dimensions with explicit rows and columns, ideal for page layouts and galleries. A common rule is Flexbox for components and Grid for layouts; they compose well together.

The box model is content plus padding, border and margin. With content-box (the default), width covers only content so padding and border add to total size. With border-box, width includes padding and border, making layouts predictable. Most teams set global border-box and size components accordingly.

Build mobile-first fluid layouts with relative units, flexible Grid and Flexbox, and media queries at content breakpoints rather than device sizes. Add responsive images with srcset and sizes, touch-friendly targets, and test across viewports plus zoom and reduced-motion preferences. Mention container queries for component-level responsiveness.

The cascade orders origins, importance, specificity, and source order, with inline styles and important declarations beating normal author rules. Specificity scores count ids, classes with attributes and pseudo-classes, then elements, so a single id outweighs many classes. Keep selectors flat and low-specificity so overrides stay predictable without specificity wars.

Relative offsets an element from its normal place while preserving its flow space, and creates the containing block for absolutely positioned children. Absolute removes the element from flow against the nearest positioned ancestor, fixed pins to the viewport, and sticky toggles between relative and fixed within its scroll container. Choose sticky for headers that dock then release.

Set display flex on the parent with justify-content center on the main axis and align-items center on the cross axis for single-shot centering. For unknown-size children this beats margin auto and transform hacks because it stays in flow and responsive. Mention gap for spacing and wrapping behavior for narrow viewports.

Define named areas in grid-template-areas for a visual ASCII map of header, sidebar, main, and footer, then assign children with grid-area names. This makes layout intent readable and responsive rearrangement a matter of redefining the map per breakpoint. Reserve implicit placement for galleries and explicit areas for page shells.

Transitions: interpolate between two states on a trigger like hover or class change, simple for micro-interactions with timing and easing control. Keyframe animations: script multi-step sequences with percentages, iteration, direction, and fill modes that can run without triggers. Prefer transitions for state feedback and keyframes for loaders and choreographed motion.

Animating transform and opacity lets the browser composite on the GPU without reflow or repaint of surrounding layout. Promote animated layers deliberately, keep paint areas small, and verify with performance panels showing green composited layers. Avoid animating width, height, top, or left since each frame triggers costly layout.

Container queries respond to the size of a component parent rather than the whole viewport, so cards and widgets adapt wherever they are placed. This makes design systems truly reusable across sidebar, grid, and full-width slots without breakpoint guessing. Pair with container-type sizing and logical properties for robust layouts.

Custom properties cascade like normal declarations and resolve at use time, so redefining a handful on a theme root re-skins every var consumer instantly. Scope tokens by component with fallbacks, toggle themes via data attributes, and drive runtime changes from JavaScript without rebuilding stylesheets. Keep token names semantic such as surface and accent rather than literal colors.

BEM names classes as Block, Element, and Modifier triples that encode ownership and state in flat selectors with minimal specificity. Flat names prevent cascade surprises, grep-friendly classes speed refactors, and modifiers express variants without overrides. Enforce it with linting and component-scoped styles where useful.

Pseudo-classes: style elements by state such as hover, focus-visible, or nth-child without adding markup. Pseudo-elements: style virtual parts like first-line, marker, or generated before and after content. Combine them for polished states, like focus-visible outlines plus custom markers, while keeping semantics in real elements.

z-index only competes within the same stacking context, and properties like opacity below one, transforms, filters, and isolation create new contexts that trap children. Debugging means walking up ancestors for context creators rather than raising numbers blindly. Keep a small token scale for layers and document which components may escape it.

CSS Modules: scope class names per file at build time with zero runtime cost and full static extraction. CSS-in-JS: colocates dynamic styles with components using runtime or compiled interpolation, powerful for theme-driven values at bundle cost. Choose modules for performance-first apps and compiled CSS-in-JS when dynamic theming dominates.

Utilities speed prototyping with constrained design tokens, purgeable output, and consistent spacing without naming debates. Costs include verbose markup, learning the scale, and repeating long class strings that components should abstract. Succeed by extracting components early and configuring tokens to match the design system.

Tokenize colors, surfaces, and elevation as custom properties, switch themes with data attributes on the root, and persist user choice with system-preference fallback. Smooth transitions, themed images and charts, and contrast-tested pairs per theme complete the job. Scope brand overrides per tenant for white-label products.

A closure is a function bundled with references to its outer lexical scope, so inner functions retain access to outer variables after the outer function returns. Uses include data privacy via the module pattern, callbacks and event handlers, currying and partial application, memoization, and state in hooks. Warn about stale closures in effects and loops capturing loop variables.

var is function-scoped, hoisted with undefined initialization, and allows redeclaration, which causes subtle bugs. let and const are block-scoped with a temporal dead zone; let allows reassignment while const forbids rebinding (objects still mutable). Prefer const by default, let when reassignment is needed, and avoid var in modern code.

JavaScript runs on a single thread with a call stack, task and microtask queues, and Web APIs. Synchronous code runs to completion while async callbacks resolve via the event loop, with microtasks (promises, queueMicrotask) draining before the next macrotask (setTimeout, I/O). This explains why awaited code never blocks the thread and why long synchronous loops freeze the UI.

Events travel down through capture, hit the target, then bubble upward, and listeners can hook either phase with the capture flag. Delegation attaches one listener on a parent and matches event targets, handling dynamic children efficiently with less memory. Mention stopPropagation tradeoffs and why delegation simplifies list UIs.

Promises: objects representing eventual values chained with then and catch, explicit for combinators and parallel flows. Async await: syntactic sugar that reads like synchronous code with try catch error handling, ideal for sequential logic. Use await for readability and drop to raw promises for controlled concurrency with combinators.

All resolves when every input succeeds and rejects fast on the first failure, ideal for dependent batches. AllSettled always resolves with per-promise outcomes for best-effort aggregation, any resolves on the first success for redundant sources, and race settles with the first outcome for timeouts. Pick by failure semantics, not habit.

Debounce: waits for quiet after the last call before firing, ideal for search input and resize recalculation. Throttle: fires at most once per interval during continuous activity, ideal for scroll and mousemove handlers. Implement both with timers and trailing or leading options matched to UX needs.

Objects link to a prototype that supplies shared methods, and property lookup walks the chain until found or undefined. Classes are sugar over constructor functions and prototype assignment with super wiring parent links. Prefer composition and factory clarity, using class syntax where teams expect it but understanding the underlying delegation.

This depends on call site: method calls bind the receiver, plain calls yield undefined in strict mode, constructors bind fresh instances, and arrow functions inherit lexically. Explicit bind, call, and apply set it manually, which explains React class handler binding rituals. Prefer arrows for callbacks and explicit binding at API boundaries.

ESM: static import and export syntax with tree-shaking, top-level await, and browser-native support. CommonJS: dynamic require with module exports and runtime resolution, dominant in legacy Node code. Prefer ESM for new code, interop carefully at boundaries, and keep module side effects minimal.

Native fetch is dependency-free with streaming support but requires manual timeout, retry, and error-status handling. Axios adds interceptors, timeouts, request cancellation helpers, and friendlier errors at dependency cost. Standardize one client with typed wrappers, retries, and auth refresh rather than scattering raw calls.

localStorage: persists key value strings per origin across sessions with generous limits but no expiry or server visibility. SessionStorage: same API scoped to a single tab lifetime for transient flows. Cookies: small values sent with requests, supporting HttpOnly, Secure, and SameSite flags for auth. Never store tokens in web storage when HttpOnly cookies fit.

Shadow DOM gives components encapsulated markup, styles, and behavior hidden from the outer document, powering native web components and elements like video controls. Slots project light DOM into shadow trees while scoped styles cannot leak either direction. Reach for it when building framework-agnostic design-system primitives.

Unit: verify isolated functions and hooks fast with mocked boundaries. Integration: verify composed modules like form plus validation plus API mocks together. End-to-end: drive real browsers through critical journeys for release confidence at higher cost and flake risk. Pyramid shape with many units, solid integration, and few E2E keeps signal high.

Interfaces: object-shape contracts with declaration merging and extends, idiomatic for public component props. Types: aliases for any shape including unions, tuples, and mapped forms, stronger for compositional domain modeling. Use interfaces for extensible object APIs and types for unions and transformations.

Generics parameterize components, hooks, and utilities over element or data types so one implementation serves many shapes with full inference. Constrain with extends, default sensibly, and let call sites infer rather than annotate. Well-placed generics remove casts while preserving autocomplete and refactoring safety.

Strict null checks force explicit handling of nullable values while control-flow narrowing refines unions through guards, typeof, and discriminants. Exhaustiveness checks on discriminated unions turn missing cases into compile errors. Treat strict errors as bug reports and fix the model rather than asserting non-null everywhere.

Profile first with React DevTools and Lighthouse, then memoize expensive components with memo, useMemo and useCallback, virtualize long lists, code-split routes and heavy components with lazy and Suspense, optimize images with next/image and modern formats, and avoid wasted renders from inline objects or context churn. Measure before and after with Core Web Vitals (LCP, INP, CLS).

The observer fires callbacks as elements cross viewport thresholds without scroll listeners, letting images, videos, and list pages load just in time. Combine with native loading lazy, placeholder sizing to prevent layout shift, and disconnect cleanup. Gate prefetch distance by connection quality for data-sensitive users.

Largest Contentful Paint marks when the main content becomes visible, Interaction to Next Paint measures responsiveness across the interaction lifetime, and Cumulative Layout Shift sums unexpected visual movement. Budgets like fast LCP, responsive INP, and near-zero CLS map directly to perceived quality. Track field data by page template and device class, not lab averages alone.

Split at route boundaries and heavy widgets so users download only what the current view needs, with named chunks and preload hints for likely next routes. Analyze bundles to find oversized dependencies, replace moment-style giants with modular imports, and set performance budgets in CI. Verify with coverage panels showing unused bytes removed.

Memoize expensive subtrees so unchanged props skip rerender while virtualized lists mount only visible rows with recycled DOM nodes. Measure with profiler flame graphs before optimizing, fix inline-object identity churn first, and window lists beyond a few dozen complex rows. The combo keeps 60fps scrolling on modest devices.

Srcset offers multiple resolutions and formats while sizes tells the browser the rendered slot width, so it fetches the smallest sufficient file. Serve modern formats with fallbacks, lazy-load below the fold, and set explicit dimensions to avoid layout shift. Automate generation in the build or image CDN so authors cannot forget.

Analyzers visualize which modules dominate the bundle so barrel imports, duplicates, and polyfill bloat become obvious. Tree shaking drops unused ESM exports during minified production builds, amplified by sideEffects flags and modular imports. Enforce budgets that fail CI when chunks regress.

Service workers intercept network requests with scripted strategies like cache-first for assets, network-first for API data, and stale-while-revalidate for balance. Precache app shells at install, version caches for clean upgrades, and queue mutations for background sync. Scope carefully and test update flows since stale workers haunt users.

SSR: renders HTML per request for fresh personalized content at server compute cost. SSG: prerenders pages at build time for maximum speed and CDN cacheability of stable content. ISR: regenerates static pages in the background on demand, blending freshness with edge caching. Mix per route by content volatility.

Preload: fetches a critical current-page asset early with high priority, such as hero fonts or styles. Prefetch: fetches likely next-navigation resources at low priority during idle. Preconnect: warms DNS, TLS, and sockets to third-party origins before requests. Audit with network waterfalls and avoid over-prioritizing everything.

Use semantic HTML (buttons, headings, landmarks), visible focus states, sufficient color contrast, keyboard operability for all interactions, labels for inputs, alt text for images, and ARIA only to fill genuine gaps like roles and live regions. Test with keyboard-only navigation plus a screen reader and automated checks with axe and Lighthouse in CI.

Roles communicate widget semantics like dialog, tablist, or alert to assistive tech when native elements cannot express them. Live regions announce async updates politely or assertively, with atomic and relevant attributes tuning verbosity. Prefer native elements first and add ARIA only for genuine gaps, verifying with a screen reader.

Skip links jump past repeated navigation to main content on first Tab, essential for efficient keyboard travel. Focus traps keep modal and menu interaction cycling inside until dismissed, then return focus to the trigger. Implement with visible focus styles, escape handling, and inert background content.

Meet WCAG contrast ratios for normal and large text, test every theme including dark mode and disabled states, and never rely on color alone for meaning. Check with automated tools plus manual sampling of real screens, adding icons or text cues alongside color. Bake tokens with passing pairs into the design system.

Navigate full flows with at least one desktop and one mobile reader using keyboard only, checking headings order, landmarks, names, and live announcements. Pair manual passes with axe scans in CI for regressions, and include disabled users in research where possible. File semantic fixes at the component level so every consumer benefits.

Header, nav, main, aside, and footer landmarks let screen-reader users jump between page regions and understand layout instantly. One main per page, labeled navs, and hierarchical headings complete the map. Validate by navigating the rotor or landmarks menu rather than eyeballing visuals.

Honor the reduced-motion media signal by disabling parallax, autoplay animation, and smooth-scroll effects while preserving essential state changes. Provide a manual toggle too, keep content understandable without motion, and test with OS settings enabled. Motion should enhance, never gate, comprehension.

Associate every input with a programmatic label, group related fields in fieldsets with legends, and announce errors via describedby plus summary regions. Validate on blur and submit with inline messages near fields, move focus to the error summary, and preserve entered values. Test the whole flow keyboard-only with a screen reader.

On navigation move focus to the new main heading with a tabindex target and update the document title so screen-reader users perceive the page change. Announce async loading states, restore scroll sensibly, and keep skip links functional per view. Without this, keyboard users stay stranded on removed content.

Write alt that conveys the image intent in context: empty alt for decorative images, concise function for icons and buttons, and fuller descriptions for informative charts with data tables as fallback. Avoid redundant phrases like image of and keep text near the image for complex visuals. Review with images disabled to feel the experience.

Size targets to at least platform minimums with real spacing so neighbors are not mis-tapped, and keep hover-only actions available via tap and keyboard. Support pointer, touch, and stylus with adequate hit areas and visible focus, testing on small devices one-handed. Forgiving targets reduce errors for motor-impaired and rushed users alike.

useId generates stable unique ids that survive server rendering for pairing inputs with labels and descriptions without global counters. Library components use it for aria-labelledby and describedby wiring that stays collision-free across instances. This removes a whole class of duplicate-id accessibility bugs.