Easy interview questions in Frontend Dev, page 5
Explain Pick versus Omit with User examples
Pick keeps listed keys; Omit drops them. Show User with id, name, email; derive Pick<User,"name"|"email"> and Omit<User,"id">.
How would you unit test a React title component?
This tests React Testing Library's user-centric approach and Jest basics. A strong answer renders the component, queries the h1 by role or text, and asserts it is in the document. A red flag is using Enzyme shallow rendering or testing internal state.
Describe a common use for Partial<T> and explain Required<T>
Partial fits PATCH updates where only some fields arrive; Required strips optionality to enforce all properties.
What are fireEvent and user-event, and why prefer user-event?
FireEvent triggers single DOM events; user-event simulates full interactions with focus checks. Prefer user-event.
Create a User type alias from a function return type
Use typeof to grab the function type, then ReturnType to extract the return object shape.
How do you define a basic Vue or Angular route?
Tests SPA routing conventions. Angular: Routes array in app.routes.ts with path and component, provided in bootstrap. Vue: routes array in src/router/index.js passed to createRouter. Red flag: omitting the outlet or placing config in a component.
Reusable Button with hover, focus, disabled
Use a real <button>, style :hover, a visible :focus-visible ring, and the [disabled] attribute that also blocks interaction.
Create a template link to a route without a full page reload
Tests SPA client-side routing knowledge. Strong answer: name RouterLink or routerLink, explain click interception and History API URL updates, and contrast with plain anchor tags.
Designing a Card component API
Simple props for title and image, but children or slots for arbitrary content instead of a string prop, keeping it composable.
How do you create a /dashboard route in Next.js App Router?
Tests App Router file-system routing and the page.js convention. Good answer: create app/dashboard/page.js with a default export, note that only page.js creates an addressable route, and layouts do not.
What is the core difference between localStorage and sessionStorage?
SessionStorage dies with its tab; localStorage survives restarts and shares across tabs. Example: checkout form versus theme preference.
What is layout.js and how does it differ from shared headers?
Layout.js persists across navigations without remounting; a shared header in each page.js remounts and loses state.
How do you store and retrieve a TypeScript object in localStorage?
This tests your knowledge of Web Storage string constraints and JSON serialization. A strong answer covers JSON.stringify on write, JSON.parse on read, and typing the result with a TypeScript interface.
Associating a label with a form input
Explicit association via for and id, implicit by wrapping the input, and why this gives screen readers an accessible name and larger click target.
How do you implement a data-fetching Composable in Vue 3?
Write useFetch accepting a URL, exposing data, loading, and error refs, then return them.
How to create a singleton Angular auth service
Tests Angular dependency injection and singleton scope. Strong answer: use the Injectable decorator with providedIn set to root for an application-wide singleton, then inject it into components.
What is a Svelte Action? Write a simple logging action.
Define a function receiving the node, log a message, and optionally return destroy.
Key difference between Server and Client Components in Next.js?
Tests App Router rendering boundaries. A strong answer contrasts server-only execution against browser interactivity, choosing Client Components only for state, effects, or events.
Programmatically change SPA URL without reload and what is state for?
This tests History API fluency. Answer: use pushState or replaceState to change the URL silently; the state object is serializable data tied to the history entry, surfaced through popstate on back or forward navigation.
How do you fetch data for SSG in a Next.js Server Component?
This checks if you know Server Components fetch at build time for static routes. A strong answer uses native fetch in an async Server Component, caches into static HTML, and shows a page.js snippet. A red flag is mentioning getStaticProps or useEffect.
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