Easy interview questions in Frontend Dev, page 4
Explain the difference between React.memo and useMemo
React.memo skips re-renders when props match; useMemo caches a computed value between renders.
What is a CSS pre-processor?
A pre-processor adds variables, nesting, mixins, functions, and partials, compiling its own syntax into plain CSS for the browser.
Child re-renders with unchanged props: function identity and useCallback fix
This tests reference equality and React memoization. A strong answer says inline functions recreate on every parent render, breaking React.memo, and uses useCallback with a correct dependency array. A red flag is ignoring identity or omitting dependencies.
Sass variable versus CSS custom property
Sass $vars resolve at build time and vanish from output; CSS --vars live in the browser, cascade, inherit, and update at runtime. Use Sass for static config, custom properties for theming.
How would you use React Profiler to find unnecessary re-renders?
This tests the Profiler for wasted renders. A good answer covers wrapping a subtree in Profiler, comparing actualDuration to baseDuration on updates, and checking for missing memoization. Red flag: mentioning only the browser extension without timing metrics.
What is nesting in Sass and its pitfall?
Nesting writes child rules inside parents mirroring structure, but deep nesting generates long descendant selectors with high specificity.
How does Vue v-model work syntactically under the hood?
Tests if you know v-model is syntax sugar over prop and event pairs. Strong answers map text to :value/@input, checkboxes to :checked/@change, selects to value/@change, and note JS state wins. Red flag: calling it magic or true two-way binding.
Key differences between Template-Driven and Reactive Forms in Angular
This tests Angular form architecture tradeoffs. Contrast explicit synchronous reactive models with implicit asynchronous template-driven ones; assign reactive to scalable dynamic forms and template-driven to simple inputs.
Bind an input to a variable and validate with reactivity
Tests Svelte reactivity: connecting DOM state to validation logic. Good answer: $state for the variable, $effect to run validation when it changes, cleanup if needed. Red flag: using effects where event handlers suffice or creating infinite loops.
Refactor a function using generics to accept any array type
It tests generic type parameters for preserving element types through a function boundary. Answer: declare T, accept T[], return T, and let the compiler infer the element type from the call site.
Explain generic constraints and provide a length-constrained generic example
Explain that extends requires properties; show T extends { length: number }; give a generic function signature.
When would you choose Redux or Zustand over React's built-in hooks?
Choose global state when many components share rapidly changing state, logic is complex, or updates must be traceable.
How do Redux actions, reducers, and click-to-render data flow work?
Tests Redux unidirectional flow and immutability. Strong answer: actions are plain event objects, reducers are pure functions returning new state, and flow goes dispatch to store to UI. Red flag: actions mutating state or reducers with side effects.
Purpose of a design system for developers
A single source of truth of reusable components and tokens that ensures consistency, speeds delivery, and centralizes accessibility.
What are design tokens?
Platform-agnostic name-value pairs for design values, transformed into CSS variables or platform code, consumed by components by name.
Component versus pattern in a design system
A component is a single reusable UI building block; a pattern is a documented way of composing components to solve a recurring problem.
What is prop drilling and when is it a problem?
Define it as passing data through components that ignore it; move to global state when unrelated branches need same data.
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.
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.
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.
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