Easy everything in React & Next.js, page 2
How do you fetch data for SSG in a Next.js Server Component?
This checks if you know Server Components fetch at build time for static routes. A strong answer uses native fetch in an async Server Component, caches into static HTML, and shows a page.js snippet. A red flag is mentioning getStaticProps or useEffect.
Key difference between Server and Client Components in Next.js?
Tests App Router rendering boundaries. A strong answer contrasts server-only execution against browser interactivity, choosing Client Components only for state, effects, or events.
What is layout.js and how does it differ from shared headers?
Layout.js persists across navigations without remounting; a shared header in each page.js remounts and loses state.
How do you create a /dashboard route in Next.js App Router?
Tests App Router file-system routing and the page.js convention. Good answer: create app/dashboard/page.js with a default export, note that only page.js creates an addressable route, and layouts do not.
What are fireEvent and user-event, and why prefer user-event?
FireEvent triggers single DOM events; user-event simulates full interactions with focus checks. Prefer user-event.
How would you unit test a React title component?
This tests React Testing Library's user-centric approach and Jest basics. A strong answer renders the component, queries the h1 by role or text, and asserts it is in the document. A red flag is using Enzyme shallow rendering or testing internal state.
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.
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.
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 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.
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.
Explain the difference between React.memo and useMemo
React.memo skips re-renders when props match; useMemo caches a computed value between renders.
How do you handle a basic form submission in React?
Tests declarative form handling via controlled state. Nail it with onSubmit on the form, preventDefault to stop native reload, and state as the single source of truth. Red flag: reading values through refs or querySelector.
Explain controlled vs uncontrolled React form inputs and trade-offs
Tests state versus DOM ownership. Controlled inputs bind to React state via onChange; uncontrolled inputs read from DOM via refs. Trade-offs: reactivity, validation, complexity. Red flag: saying uncontrolled is easier while ignoring lost live validation.
Why use Link over <a> for internal navigation?
This tests client-side routing vs full page reloads. A strong answer covers click interception, History API URL updates, and route prefetching. A red flag is claiming Link is purely stylistic or identical to a plain anchor.
Primary roles of BrowserRouter, Routes, and Route, and basic route setup
Tests v6 routing hierarchy. BrowserRouter provides history; Routes picks one match; Route maps path to element. Wrap Routes in BrowserRouter with nested Route elements for / and /about. Red flag: omitting the router or confusing Routes with Switch.
What is the fundamental difference between client-side and server-side routing?
Server routes return full documents and reload; client routes swap JS views and use the History API without server requests.
Where and how to import global stylesheets in Next.js
This tests Next.js style entry points. In the App Router, import global CSS in the root layout.js; in the Pages Router, import it in _app.js. Never import global styles inside pages or components, since Next.js restricts global CSS to root-level files.
How do CSS Modules solve global scope conflicts in React?
This tests build-time hashing and local scope. An answer explains that CSS Modules compile classes into unique hashes, scoping styles to the component, and shows the React import pattern styles.primary.
What is a custom hook? Write a simple useToggle example.
What it tests: Whether you see hooks as stateful logic extraction. Outline: Define a use-prefixed function calling hooks; write useToggle with useState and callback; explain extraction vs duplication. Red flag: Helpers without hooks or missing use prefix.
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