React &amp; Next.js

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.

Explain useReducer and when to prefer it over useState

Tests if you know useReducer centralizes complex state transitions better than scattered useState. Answer: define reducer/dispatch, then contrast with useState via interdependent fields or deep updates. Red flag: calling it only for global state or Redux.

Use useContext to provide theme state without prop drilling

This tests global state sharing without prop drilling. A strong answer uses createContext and a Provider with useState at the app root, then calls useContext in nested components. Red flag: ignoring re-render costs or placing the Provider too deep.

Explain the difference between useMemo and useCallback

This tests whether useMemo caches values while useCallback caches functions, and why that matters for React.memo. A strong answer notes React.memo uses Object.is, so a new inline function prop triggers a child re-render. Red flag: claiming they are the same.

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.

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.

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.

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 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.

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.

advanced1 min read

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.

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.

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.

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.

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.

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.