Interview questions in Frontend Dev, page 14
Accessibility built into a Modal component
Trap focus in the modal, return focus on close, escape to dismiss, role dialog with aria-modal and a labelled title, inert background.
Share state between sibling components without a state library
Tests if you over-engineer simple sibling state. Good answers lift state to the common parent, passing data down via props and changes up via events; or use built-in primitives like Svelte stores or an Angular shared service.
Implement a generic PickByType<T, U> utility type
Tests mapped-type key filtering via conditional types and as remapping. Great answer: [K in keyof T as T[K] extends U ? K : never]: T[K]. Red flag: mapping all keys and setting values to never, which preserves keys instead of removing them.
How does React Testing Library's guiding principle influence query choice?
This tests whether you prioritize user-visible attributes over implementation details when selecting queries. A strong answer ranks getByRole, label, and text above testId because users interact with meaning, not data attributes.
Support a one-off that deviates from the system
Offer sanctioned escape hatches like custom-property overrides, scope the one-off to the app not the library, track it for promotion or removal.
Fetch data on first render and manage loading and error states
Tests lifecycle awareness and separation of concerns. Strong answer: use mount hook (onMounted, ngOnInit, onMount), hold reactive data/loading/error states, and render conditional UI branches. Red flag: calling fetch directly in template or render function.
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.
When to adopt Pinia or NgRx over simple services?
Services work for small apps; use Pinia/NgRx when state is shared across many components, mutations are complex, or debugging/undo matters.
Versioning a design system library
Monolithic versioning is simple and coherent but couples unrelated changes; independent versioning gives granular upgrades but adds tooling complexity.
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.
Architect themes on a token foundation
Separate primitive tokens from semantic alias tokens that themes redefine, emit semantics as custom properties per theme scope, components use only semantics.
Implement optimistic UI for a like button with rollback on failure
Tests state management and error recovery in async UIs. A strong answer mutates state instantly, fires the API in parallel, keeps a rollback snapshot, and reverts with a toast on failure. Red flag: waiting for the network or skipping revert logic.
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.
Test a React component fetching async data on mount
Whether you can assert on asynchronous DOM updates without race conditions. Mock the API, render, then use findBy or waitFor to assert on loading and loaded states. Red flag: using getBy right after render or forgetting to await async queries.
Light and dark themes with design tokens
A shared primitives file plus per-theme semantic files, transformed into custom properties scoped by selector, components read the semantics.
How would you cache data between a list and detail view?
Use nested keys so detail reads from list cache with staleTime to skip refetches.
Write a generic MakeOptional<T> mapped type without using Partial
This tests mapped type mechanics and the optionality modifier. A strong answer iterates over keyof T, adds the ? modifier, and preserves the original type via indexed access. A red flag is suggesting Object.assign or saying you would just use Partial.
How do you unit test a custom React hook like useCounter?
This tests whether you know hooks must run inside a component and that renderHook provides that scaffold. A strong answer names renderHook and act, explains result.current access, and warns against calling hooks directly.
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