Founding engineer frontend interview questions

As asked

Your React app started with useState and now has prop-drilling five levels deep, plus shared server data that multiple components need. When do you reach for a state manager, and which one do you pick and why?

Sample answer outline

Candidate should distinguish server state (React Query or SWR are the right tool, not Redux) from client UI state (Context or Zustand for simple cases, Redux Toolkit for complex cross-cutting state). Strong answers name the smell that triggers the switch: prop-drilling past two levels for server data, cache invalidation bugs, or optimistic update complexity. Avoid candidates who reach for Redux reflexively.

Expect these follow-ups

• How does React Query know when to refetch data and how do you override that behavior?
• You have global UI state (sidebar open/closed) and remote server state in the same Redux store. Is that a problem?

As asked

You are building a data-heavy analytics dashboard in Next.js. Walk me through how you decide which components render on the server versus the client, what the performance implications are, and where RSC actually hurts you in a dashboard context.

Sample answer outline

Strong answer explains RSC waterfall risk for nested async data fetching, the benefit of zero client-side JS for static parts, and the hard constraint that RSC cannot use useState or browser APIs. Candidate should identify dashboard charts as client-only territory, cover streaming with Suspense for incremental loading, and flag the deployment constraint that RSC requires Node.js server, not a static CDN.

Expect these follow-ups

• A chart component needs to fetch its own data on user interaction. How does that change your RSC decision?
• How do you share a session object between server and client components without prop-drilling?

As asked

Explain the four caching layers in the Next.js App Router, how they interact, and describe a real bug you could ship if you misunderstand the boundary between the full route cache and the data cache.

Sample answer outline

The four layers are: request memoization (per-render deduplication), data cache (fetch() with revalidate), full route cache (statically rendered pages), and router cache (client-side navigation). A concrete bug: a page statically rendered at build time shows stale user-specific data to every visitor because revalidate was not set. Candidate should cover cache.noStore() for dynamic data and revalidatePath/revalidateTag for on-demand invalidation.

Expect these follow-ups

• How do you opt a specific fetch call out of the data cache without disabling caching globally?
• A Vercel deployment shows stale data even after you call revalidatePath. What do you check?