Interview questions in Frontend Dev, page 4
How would you implement lazy loading for an Angular feature module?
This tests route-level code splitting and CLI workflows. A great answer hits: ng generate module, loadChildren in the route config, and excluding the feature from AppModule. A red flag is suggesting manual chunking instead of router-driven lazy loading.
Offload CPU-intensive work to a Web Worker and explain communication.
This tests main-thread blocking and worker messaging. A strong answer covers: new Worker(url), moving logic to a worker file, sending data via postMessage(), and receiving results via onmessage. A red flag is suggesting DOM use or shared memory from workers.
Why pass a function to useState for expensive initial values?
This tests your understanding of React's render-phase behavior. Without the function, expensive work reruns on every render and is thrown away; the initializer runs once only during mount.
How do CSS Custom Properties manage a design system color palette?
Define --color-primary on :root, use var() for buttons and headings, mention fallbacks.
How do you configure Vite Library Mode for ESM and UMD outputs?
Tests Vite Library Mode multi-format packaging. Strong answer: build.lib entry, formats es and umd, fileName function, and rollupOptions.output.globals for Vue. Red flag: multiple configs or omitting UMD global name.
Explain Shadow DOM, encapsulation, and event propagation
Tests Web Components encapsulation and event retargeting. A strong answer covers shadow root/host/boundary, CSS scoping, open versus closed modes, and retargeting where events appear to come from the host element.
When would you choose useLayoutEffect over useEffect?
Use useLayoutEffect to measure or mutate DOM before paint to stop flicker; useEffect runs after paint.
How do you create gradient text in CSS?
Set a gradient background-image, use background-clip: text to clip to glyphs, and color: transparent to reveal it.
Prerendering vs SSR in SvelteKit: trade-offs?
Prerender generates static HTML at build, SSR renders on each request, prerender wins on speed but requires static data.
What are CSS variable fonts?
One file encodes a continuous range along axes, cutting requests and bytes, controlled via font-weight, font-style, and font-variation-settings.
Define a User object shape: interface vs type alias?
Tests structural typing and API contracts. Good answer: interface for API objects because it merges; type alias for unions. Forced: declaration merging needs interface; discriminated unions need type. Red flag: claiming performance differences.
Why is exhaustive-deps critical and when can you disable it?
This tests closure and effect timing intuition. A strong answer explains missing deps let effects read stale render values, gives a concrete override like a ref or stable callback, and warns that silencing the rule hides refactor hazards.
Design the public API for a reusable Button component
Variant, size, disabled, type props; forward click; slots for content/icons; no router/form coupling.
How do you type a function with two possible response shapes?
This checks TypeScript union types for API responses. Define a union of Product[] and a message object, use a type guard to narrow it at runtime, and return that.
What is prop drilling in React?
Define it as threading props through middle layers; give a three-layer example like a theme toggle; cite useContext.
How does color-scheme interact with user-agent stylesheets and prefers-color-scheme?
This tests the boundary between author CSS and browser chrome. color-scheme lets the UA recolor native UI like scrollbars and form controls automatically, while prefers-color-scheme styles custom components.
Primary mechanism for passing data from parent to child component
Tests unidirectional parent-to-child data flow and explicit component contracts. A strong answer names props or inputs, explains one-way binding, and warns against direct child mutation. Red flag: confusing props with global state or events.
How would you use an enum to represent API statuses?
What it tests: TypeScript enum runtime behavior and API serialization trade-offs. Strong answer: define a string enum with exact API values, contrast readable wire format vs opaque numeric values.
How does children work, and why is it fundamental to composition?
Tests React composition knowledge. Good answer: children is a prop holding nested JSX; a Card wrapper renders {children} to let parents inject markup; contrast with prop-driven text. Red flag: calling children magic syntax instead of a standard prop.
CSS Grid: difference between 1fr and auto column sizing?
Tests fractional vs intrinsic sizing. 1fr divides leftover space; auto shrinks to content. Note that 1fr minimums default to auto, causing overflow with unbreakable content, unlike auto tracks. Red flag: claiming they are identical or auto always fills space.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles