Advanced interview questions in React & Next.js
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.
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'.
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.
When would you choose useLayoutEffect over useEffect?
Use useLayoutEffect to measure or mutate DOM before paint to stop flicker; useEffect runs after paint.
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.
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.
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.
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.
Runtime CSS-in-JS performance pitfalls in SSR Next.js
Runtime libs serialize styles per render, need style collection on the server, risk FOUC and double work in App Router.
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.
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.
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.
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.
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.
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.
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.
What is state hydration in Next.js SSR with Redux or Zustand?
Hydration attaches listeners to server HTML; serialize state to an escaped script tag; boot client store before React or markup is discarded.
How do you balance unit, integration, and end-to-end tests in Next.js?
This tests allocation of test types across Next.js boundaries. Propose 70 percent unit tests for utilities, 20 percent integration tests for data fetching, and 10 percent end-to-end tests for critical flows, weighing cost and confidence.
Cypress auth strategies: UI login vs programmatic session
Tests your grasp of Cypress test isolation and speed tradeoffs. A strong answer contrasts slow UI login (ideal for the auth flow itself) against programmatic auth via cy.request or cy.session (fast setup for protected routes).
MSW vs mocking fetch or axios directly in Jest tests
MSW intercepts HTTP via Service Workers and Node, staying client-agnostic; direct fetch or axios mocks couple tests to specific libraries.
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