Frontend Component and React Architecture Questions

Covers component based frontend architecture and patterns with emphasis on React but applicable to component driven UI design generally. Topics include container versus presentational components, composition over inheritance, hooks, higher order components, render props, state management strategies, modularization, performance optimization, and testability. Candidates should explain how to decompose complex UIs into reusable, maintainable components and trade offs of different approaches.

EasyTechnical

35 practiced

Explain the role of semantic HTML in component development. For a navigation component that includes links and a search form, list the semantic elements and attributes you would use such as <nav>, <ul>, <li>, <a>, <form>, <label>, explain why they matter for accessibility and SEO, and describe how you'd make the component responsive without breaking semantics.

Sample Answer

**Answer (Frontend Developer perspective)**

**Role of semantic HTML**Semantic HTML provides meaningful structure that screen readers, search engines, and browsers understand. It improves accessibility, SEO, keyboard navigation, and maintainability of components.

**Semantic elements & attributes for a navigation with search**- <nav> — wraps the global/section navigation so assistive tech recognizes a navigation landmark.- <ul> / <li> — groups nav links as a list (logical reading order).- <a href=""> — link targets; include descriptive link text and rel attributes when needed (e.g., rel="noopener" for external).- <form role="search" aria-label="Site search"> — search form semantic role; aria-label helps identify purpose.- <label for="q"> — explicit label for the search input for screen readers.- <input id="q" name="q" type="search" /> — type="search" gives user agent hints.- <button type="submit">Search</button> — accessible control.- Optional: aria-current="page" on the active <a> for current-page indication.

Example markup:

html

<nav aria-label="Primary">
  <ul>
    <li><a href="/home" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
  <form role="search" aria-label="Site search" action="/search" method="get">
    <label for="q" class="visually-hidden">Search site</label>
    <input id="q" name="q" type="search" />
    <button type="submit">Search</button>
  </form>
</nav>

**Why it matters (accessibility & SEO)**- Screen readers rely on landmarks (<nav>, role="search") and labels to offer quick navigation.- Semantic markup provides meaningful headings and link text for crawler indexing, improving SEO.- Proper ARIA (used only when native semantics are insufficient) ensures state and context are communicated.

**Making it responsive without breaking semantics**- Keep the semantic structure intact; use CSS for layout/responsiveness (flexbox/grid, media queries).- Toggle visibility/presentation (e.g., hide/show menu) with CSS classes and JS while preserving DOM order and aria-expanded on the trigger:

html

<button aria-expanded="false" aria-controls="main-nav">Menu</button>
<nav id="main-nav">...</nav>

- Ensure focus management when toggling (trap focus in open menu, return focus to toggle).- Use progressive enhancement: markup is usable without JS; JS only enhances interactivity.

This approach keeps semantics, accessibility, and SEO intact while delivering a responsive component.

EasyTechnical

46 practiced

Design the public props API for a reusable Button component used across products. The component must support variants ('primary', 'secondary'), sizes ('sm','md','lg'), an optional icon, disabled state, and an 'as' polymorphic prop to render different underlying elements. Describe prop names, default values, accessibility attributes (aria), and how you would forward refs.

Sample Answer

**Props API (summary)**- variant: 'primary' | 'secondary' — default: 'primary'- size: 'sm' | 'md' | 'lg' — default: 'md'- icon?: ReactNode — optional icon rendered before label- iconPosition?: 'left' | 'right' — default: 'left'- disabled?: boolean — default: false- as?: keyof JSX.IntrinsicElements | React.ComponentType<any> — default: 'button'- children?: ReactNode — required label/content- onClick?: (e: MouseEvent) => void- className?: string, style?: CSSProperties, title?: string- ariaLabel?: string — used when children is icon-only- ref forwarded to underlying element

**TypeScript props example**

tsx

import React from "react";
type Variant = "primary"|"secondary";
type Size = "sm"|"md"|"lg";
export type ButtonProps<T extends React.ElementType = "button"> = {
  as?: T;
  variant?: Variant;
  size?: Size;
  icon?: React.ReactNode;
  iconPosition?: "left"|"right";
  disabled?: boolean;
  ariaLabel?: string;
} & Omit<React.ComponentPropsWithoutRef<T>, "as"|"disabled">;

**Accessibility**- If as === 'button', use disabled attribute and aria-disabled when element isn't a native button.- If icon-only, require ariaLabel prop and render aria-label={ariaLabel}.- Keyboard: ensure role="button" and tabIndex={0} if rendering non-button interactive element; handle Enter/Space.- Provide focus-visible styles.

**Ref forwarding**- Implement React.forwardRef<HTMLButtonElement | HTMLElement, ButtonProps>((props, ref) => ...)- Forward ref to the actual DOM node (e.g., button, a, div) so consumers can focus/measure.

**Defaults & behavior**- Default props: variant='primary', size='md', iconPosition='left', disabled=false, as='button'.- Use CSS utility classes based on variant/size.- When rendering anchor with disabled, prevent clicks and set aria-disabled="true".

MediumSystem Design

36 practiced

Describe how to implement route-based code-splitting in a React application using React.lazy and Suspense. Include how you would provide error boundaries and loading fallbacks, strategies for prefetching route chunks, and the differences when using SSR frameworks like Next.js where client-side React.lazy does not directly apply.

Sample Answer

**Clarify goals**Implement route-based code-splitting so each route loads only the JS it needs, provide graceful loading and error handling, and support prefetching. Also explain SSR differences (Next.js).

**High-level approach**- Use React.lazy + Suspense to lazy-load route components on the client.- Wrap routes with a loading fallback and an Error Boundary.- Prefetch route chunks via link rel=preload/prefetch or dynamic import().then(() => ...).- For SSR (Next.js) use built-in dynamic imports (next/dynamic) because React.lazy is client-only.

**Example (React Router)**

jsx

// App.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { Suspense, lazy } from 'react';
import ErrorBoundary from './ErrorBoundary';

const Home = lazy(() => import('./Home'));
const Dashboard = lazy(() => import('./Dashboard'));

function App(){
  return (
    <BrowserRouter>
      <ErrorBoundary>
        <Suspense fallback={<div>Loading...</div>}>
          <Routes>
            <Route path="/" element={<Home/>}/>
            <Route path="/dashboard" element={<Dashboard/>}/>
          </Routes>
        </Suspense>
      </ErrorBoundary>
    </BrowserRouter>
  );
}

**Error Boundary**- Implement componentDidCatch / getDerivedStateFromError to show retry UI and log errors.

**Prefetch strategies**- Use <link rel="prefetch" href="/static/js/chunk-...js" /> for idle-time prefetch.- Trigger import on hover/focus: onMouseEnter={() => import('./Dashboard')}.- Use IntersectionObserver to prefetch when a route link enters viewport.- Use Webpack magic comments for chunk naming and prefetch: import(/* webpackPrefetch: true */ './Dashboard').

**SSR / Next.js differences**- React.lazy/Suspense for data/code splitting is client-only; Next.js provides next/dynamic:

jsx

import dynamic from 'next/dynamic';
const Dashboard = dynamic(() => import('../components/Dashboard'), { ssr: false, loading: () => <Spinner/> });

- For SSR with hydration, prefer dynamic(..., { ssr: true }) or rely on Next.js page-based code-splitting; use next/link prefetch for automatic preloading.

**Trade-offs**- Suspense is simple but client-only; ErrorBoundary must surround lazy boundaries.- Aggressive prefetch improves perceived speed but increases bandwidth—use heuristics (idle, hover, viewport).

This approach balances UX (fast perceived loads), reliability (error boundaries), and compatibility with SSR frameworks.

HardSystem Design

46 practiced

Design a virtualized masonry-style grid (Pinterest-like) for variable-height items in React that supports infinite scrolling, insertion at top (prepend), and minimizes reflow. Describe the data structures (column height arrays, item metadata), measurement strategy for unknown heights, windowing strategy, scroll anchoring on prepend, and how to handle images that load asynchronously.

Sample Answer

**Overview (one-line)** Use column-based placement with per-item metadata, absolute positioning, windowed rendering per-column, measured heights updated asynchronously, and scroll anchoring on prepend to avoid jump.

**Data structures**- columnHeights: number[] — current cumulative height per column.- items: { id, estimatedHeight, height?, column?, top? ,data }[] — metadata for each item.- indexMap: Map<id, index> — quick lookup.

**Measurement strategy**- Start with an estimatedHeight (e.g., 250px) for layout and place items greedily to the shortest column.- Render only placeholders initially; after mount, measure the real DOM node height (getBoundingClientRect).- Use ResizeObserver + requestAnimationFrame to update height once measured: update item.height, recompute that column's subsequent tops and columnHeights.

**Windowing (virtualization)**- Maintain per-column visible ranges based on viewport + overscan: compute which items’ top..top+height intersect viewport.- Render only those items (plus buffer). Use absolute positioning (transform: translateY(x) & left based on column index) to avoid layout thrash.- Keep container height = max(columnHeights) so browser scrollbar is correct.

**Scroll anchoring on prepend**- Before prepend: record anchor = { anchorId, offsetFromTop = anchorNode.getBoundingClientRect().top - containerTop }.- Prepend items and re-calc positions/heights. After DOM updates, find new anchor node and set container.scrollTop so anchorNode.getBoundingClientRect().top equals previous containerTop + offsetFromTop. This preserves visual position.- For performance, batch DOM updates and restore scrollTop inside requestAnimationFrame.

**Async images**- Render lightweight placeholder (aspect-ratio box or CSS skeleton) to keep estimatedHeight stable.- On image load, measure containing item and update metadata; only reflow items in the same column below the changed item (update their top via transform) — do not recompute unrelated columns.- Use ResizeObserver for intrinsic content changes so late loads update automatically.

**Performance tactics**- Use transforms (translateY) rather than top when animating positions.- Batch measurements and layout updates.- Use IntersectionObserver for infinite-scroll trigger.- Keep estimates conservative; gradually refine for stability.

This approach minimizes full reflow by localizing updates to affected columns, virtualizing DOM nodes, and anchoring scroll on prepends.

HardTechnical

49 practiced

Design a test-and-release pipeline for a component library that ensures API contracts, visual stability, accessibility compliance, and performance budgets. Specify automated checks (unit tests, Storybook snapshots, visual diffing with tools like Percy or Chromatic, axe accessibility audits), CI gating, canary releases to a subset of apps, and rollback procedures if regressions are detected.

Unlock Full Question Bank

Get access to hundreds of Frontend Component and React Architecture interview questions and detailed answers.

Join thousands of developers preparing for their dream job.