Intermediate everything in Frontend Dev, page 14
Difference between jest.fn, jest.spyOn, and jest.mock in React
Tests whether you distinguish Jest's three mocking scopes. Good answers: jest.fn for standalone callbacks; jest.spyOn to observe existing methods; jest.mock to swap entire modules. Red flag: using them interchangeably or saying spyOn replaces modules.
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.
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.
Explain atomic state management and how it differs from Redux
This tests bottom-up vs top-down architecture. Good response contrasts atom graphs with Redux's monolithic store, notes atoms avoid extra rerenders sans selectors, and flags granular subscriptions.
How would you handle an async API call in Redux Toolkit versus Zustand?
Tests structured async state machines versus lightweight patterns. A strong answer contrasts createAsyncThunk's pending/fulfilled/rejected lifecycles with Zustand's direct set() in async functions, noting Redux's traceability trade-off.
How do you select a single property and prevent extra re-renders?
Tests selector granularity and reference equality in subscriptions. Great answer: return a primitive via a focused selector; for objects, memoize with createSelector or pass shallowEqual. Red flag: reaching for useMemo or React.memo before fixing the selector.
React Profiler long render duration: causes and next steps?
Tests interpreting actualDuration vs baseDuration. Outline: close values on updates mean broken memoization—add memo or useMemo; high baseDuration alone means an inherently slow subtree. Red flag: proposing fixes before comparing these two Profiler metrics.
How does Next.js routing auto-implement code splitting?
Tests route-based code splitting versus manual setup. Strong answers note each page/route becomes its own chunk automatically, while client-only apps need explicit React.lazy and Suspense.
How do React.lazy and dynamic import() enable code splitting?
It tests your grasp of React code-splitting and the Suspense contract. A strong answer states that lazy defers loading until first render via dynamic import, and Suspense shows a fallback while the Promise resolves.
When can overusing useMemo hurt performance and what are the trade-offs?
Memoizing cheap work wastes cycles, increases memory use, and burdens dependency tracking.
How do you use a Server Action for form submission and useFormState?
Tests server-client form state orchestration. Outline: write a Server Action that validates and returns errors; pass it to useFormState for state; wire to form action and use useFormStatus for pending UI.
Advantages of dedicated React form libraries over manual state
Your grasp of the hidden costs of fully controlled form state in React. Mention re-render reduction via refs, declarative validation, less boilerplate, and custom input support.
How would you implement real-time client-side validation in React?
Tests state-driven UI thinking over imperative DOM updates. A strong answer uses a status enum like typing or error, derives validation from state instead of redundant booleans, and conditionally renders feedback.
Prefer multiple useState or useReducer for multi-field forms?
Separate useState for simple fields; one object for coupled validation or batch resets; useReducer for complex logic.
Compare Pages Router and App Router file-based routing conventions and capabilities
Tests your grasp of the folder-as-route paradigm shift. A strong answer notes that Pages files are routes while app folders are segments requiring page.js, and cites layout.js, loading.js, and error.js as nested primitives.
How do you create a dynamic route like /products/:productId in React Router?
Tests React Router v6 dynamic segments and useParams. A strong answer declares path="products/:productId" on a Route, then extracts productId with useParams in the component. Red flag: using v5 props.match.params or manual URL parsing instead of the hook.
Implement a protected /dashboard route in React Router
Tests declarative route guards versus imperative redirects in React Router 7. Strong answer: reusable ProtectedRoute wrapper with Navigate replace, auth state above Routes, and role checks.
Implement a light/dark theming system with CSS-in-JS and React Context
This tests React Context architecture with CSS-in-JS theme injection. Strong answers include: a Theme Context with mode and toggle; ThemeProvider at the app root; consumption via useTheme or props.theme.
How would you create a styled Button accepting a variant prop
It tests prop interpolation for dynamic styling in CSS-in-JS. Good answers use styled.button with a function reading props.variant to map CSS rules in one component. A red flag is splitting into separate components per variant or using inline styles.
Compare HOCs and custom hooks for sharing logic
Tests your grasp of React's shift from wrapper-based to function-based logic reuse. Hooks eliminate wrapper hell and implicit props by extracting stateful behavior into plain functions without nesting components. Red flag: calling hooks just sugar.
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