Tearing and useSyncExternalStore in concurrent React
WHAT IT TESTS: Concurrency consistency guarantees. OUTLINE: Tearing is inconsistent UI when an interruptible render reads a changed external store mid-pass; useSyncExternalStore subscribes and forces consistent snapshots, re-rendering synchronously on change.
Session auth in Next.js with API routes and middleware
WHAT IT TESTS: Session flow on a hybrid framework. OUTLINE: Login route sets a signed httpOnly cookie, middleware validates the session at the edge and redirects, server components read the session.
localStorage vs httpOnly cookie for auth tokens
WHAT IT TESTS: Token storage security trade-offs. OUTLINE: localStorage is JS-readable so XSS steals it; httpOnly cookies are JS-invisible blocking XSS theft but exposed to CSRF, mitigated by SameSite and tokens.
Testing a component that consumes React Context
WHAT IT TESTS: Knowing context needs a Provider in tests. OUTLINE: Render inside the Context.Provider with a value, or omit it to exercise the default; use a custom render wrapper for reuse.
Runtime CSS-in-JS performance pitfalls in SSR Next.js
WHAT IT TESTS: Awareness of runtime style cost. OUTLINE: Runtime libs serialize styles per render, need style collection on the server, risk FOUC and double work in App Router. RED FLAG: Ignoring hydration or recommending runtime CSS-in-JS without caveats.
What is JSX and how does the browser run it?
WHAT IT TESTS: Grasp of JSX as syntactic sugar. OUTLINE: JSX is XML-like syntax compiled to React.createElement calls; it differs from HTML via className and camelCase; browsers never see JSX, only transpiled JS.
Multi-theme infrastructure for a component library
WHAT IT TESTS: theming architecture. OUTLINE: style components against semantic tokens exposed as CSS custom properties, define per-theme token values, and switch at runtime via a data-theme attribute or class.
Monorepo tradeoffs for a design system
WHAT IT TESTS: build/repo architecture judgment. OUTLINE: monorepos give atomic cross-package changes, shared tooling, and easy local linking; drawbacks include build complexity, CI scaling, and tighter coupling.
Component variants with BEM modifier classes
WHAT IT TESTS: structured variant styling. OUTLINE: a base block class holds shared styles, modifier classes (block--primary, block--destructive) layer only the differences, and you combine base plus one modifier.
Core tokens versus alias semantic tokens
WHAT IT TESTS: token-tier architecture. OUTLINE: core tokens are raw values like blue-500; alias tokens reference cores with intent like color-action; semantic aliasing decouples meaning from raw value.
CSS transition versus animation
WHAT IT TESTS: animation API fundamentals. OUTLINE: transitions interpolate between two states triggered by a change; animations use keyframes for multi-step, looping, autonomous motion.
CSS Grid versus Flexbox fundamentals
WHAT IT TESTS: knowing each tool's dimensionality. OUTLINE: Flexbox is one-dimensional (a single row or column), Grid is two-dimensional (rows and columns together); use Grid for page layout, Flexbox for a toolbar of items.
Brand color as a token and CSS custom property
WHAT IT TESTS: practical token-to-CSS wiring. OUTLINE: define a typed color token in JSON, generate a custom property like --color-brand-primary, then reference it with var().
Fixing brand color contrast at the system level
WHAT IT TESTS: systemic accessibility thinking. OUTLINE: build a tonal palette with known contrast steps, define semantic text-on-surface token pairs that pass AA, and enforce with automated contrast checks.
Distributing design tokens across web, iOS, and Android
WHAT IT TESTS: cross-platform token pipeline design. OUTLINE: keep one source-of-truth JSON, transform with a tool like Style Dictionary, emit per-platform formats (CSS vars, Swift, XML) in CI.
Designing a Card component's configurable API
WHAT IT TESTS: API design judgment for reusable components. OUTLINE: expose content via composition (slots/children), expose constrained variants as enums, lock spacing and brand tokens.
CSS Modules versus BEM for encapsulation
WHAT IT TESTS: understanding of scoping strategies. OUTLINE: CSS Modules scope via build-time hashed class names automatically; BEM scopes via disciplined human naming with no tooling.
Center a div with Flexbox on the parent
WHAT IT TESTS: fluency with Flexbox alignment axes. OUTLINE: set display flex on parent, justify-content center for the main axis, align-items center for the cross axis.
Structure CSS layers for reset, vendor, and components
WHAT IT TESTS: applied cascade-layer architecture. OUTLINE: declare layer order upfront, place reset earliest, vendor next, your components last so they win. RED FLAG: relying on source order or !important instead of an explicit layer declaration.
What problem do CSS Cascade Layers solve?
WHAT IT TESTS: understanding of the cascade beyond specificity. OUTLINE: layers create explicit priority bands, layer order beats specificity inside, and you control override without selector hacks.