Advanced everything in Frontend Dev, page 8
Explain list virtualization and when it beats React.memo
This tests whether you know React.memo skips re-renders but leaves off-screen nodes in the DOM. A strong answer describes virtualization mounting only visible items to cut memory use. A red flag is claiming memoization fixes jank or saves memory for big lists.
How would you avoid new functions per list item without useCallback?
Tests stable handler patterns for large lists. Answer: define one handler outside the map, attach it to every item, and read the id from a data-id attribute via currentTarget.dataset.id. Or use event delegation on the parent. Red flag: useCallback in loop.
Design a multi-step wizard form pattern in React
Shared state, step validation, and resilient navigation. A great answer uses one form instance with per-step Zod schemas, a context stepper, and localStorage persistence. Red flag: isolated forms per step that lose data on navigation.
Optimize a large form with frequent state updates
Tests render propagation and memoization discipline. Strong answers note parent updates re-render children, extract inputs to localize state, useMemo for derived values, and stable callbacks. Red flag: useMemo everywhere without component boundaries.
How do you handle 404s in React Router and Next.js App Router?
Tests client versus server routing architecture. React Router uses a wildcard route returning HTTP 200 by default; Next.js App Router uses not-found.js for server-rendered 404s. Red flag: confusing the two routers or ignoring status code semantics.
Explain Shallow Routing in Next.js Pages Router
This tests URL updates without re-running getServerSideProps or getStaticProps in the Pages Router. A strong answer defines shallow: true, cites query-state UI like filters or modals, and notes same-page and App Router limits.
CSS Custom Properties vs JS Theme Object in React
Tests render overhead vs CSS cascade. Strong answers: CSS variables update styles without re-renders, while JS theme objects in Context force subtree re-renders. Mention scoping, SSR FOUC, and setProperty interop.
What is a stale closure in React hooks?
Tests closures and hook dependencies. A strong answer defines stale closure as capturing an outdated variable, shows a useEffect interval with stale state, and fixes it with dependencies and cleanup. Red flag: omitting cleanup or using refs blindly.
Pass server-fetched data from Server Components to nested Client Components
Tests RSC boundary awareness. Strong answer: fetch in the async Server Component, pass serializable props to nested Client Components. Red flag: proposing Context or useEffect inside the Server Component.
Describe combining useContext and useReducer for scalable feature state
This tests replacing prop drilling with a context-reducer pattern. A strong answer covers two contexts for state and dispatch, a provider wrapping the subtree, and a pure reducer. A red flag is one global context or async logic inside the reducer.
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.
When would you choose useLayoutEffect over useEffect?
Use useLayoutEffect to measure or mutate DOM before paint to stop flicker; useEffect runs after paint.
Can you pass a React component as a prop? Explain Render Props.
Tests React composition. Yes, functions and JSX are valid prop values. Strong answers explain inversion of control, contrast with children, and cite dynamic layouts. Red flag: conflating render props with HOCs or saying props only accept primitives.
How does React use keys in reconciliation? When do keys cause bugs?
Tests reconciliation identity semantics. Answer: keys give scoped identity for O(n) diffing; stable keys preserve state, but indices during reordering make React reuse DOM nodes wrongly, polluting state. Red flag: saying keys are 'just for performance'.
Write the React.createElement() equivalent for this JSX
Tests JSX-to-JS compilation mechanics. Answer: createElement('a', {href: '/home', className: 'link'}, 'Go Home'). Children must be the third argument, not inside props. Red flag: nesting children in props or using an unquoted tag variable.
The act Utility in React Testing Library
React Testing Library re-exports everything from DOM Testing Library and explicitly lists act as a core top-level API method alongside render and renderHook, making it available as a named export from the framework package without requiring a separate wrapper.
Protected Routes: Server Gates, Not Hidden Links
A protected route is a server-enforced gate, not a hidden link. In Next.js, middleware or server components validate sessions before HTML ships, which matters for dashboards and billing.
How do you structure and tokenize animation and transition values?
This tests semantic token architecture for motion. Structure duration and easing into tiered tokens: primitive values, semantic aliases like feedback or navigation, and component bindings. Avoid hardcoding values or using only raw milliseconds without meaning.
How should you adapt animations for prefers-reduced-motion?
Scope motion to no-preference, swap scaling for opacity or instant cuts, keep functional changes visible.
How do you programmatically sync CSS animation progress to scroll?
This tests scroll-driven APIs beyond legacy scroll listeners. A strong answer names CSS animation-timeline and scroll-timeline declaratively, plus the Web Animations API with ScrollTimeline in JS. A red flag is using only requestAnimationFrame style mutations.
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