More in React & Next.js — page 7
What is the fundamental difference between client-side and server-side routing?
WHAT IT TESTS: You know server routing fetches HTML pages, while client routing runs in the browser. ANSWER OUTLINE: Server routes return full documents and reload; client routes swap JS views and use the History API without server requests.
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.
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.
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 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.
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.
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.
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.
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.
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 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.
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.
How does children work, and why is it fundamental to composition?
Tests React composition knowledge. Good answer: children is a prop holding nested JSX; a Card wrapper renders {children} to let parents inject markup; contrast with prop-driven text. Red flag: calling children magic syntax instead of a standard prop.
What is prop drilling in React?
WHAT IT TESTS: Awareness of coupling when props tunnel through indifferent layers. ANSWER OUTLINE: Define it as threading props through middle layers; give a three-layer example like a theme toggle; cite useContext. RED FLAG: Using Context for every prop.
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.
When would you choose useLayoutEffect over useEffect?
WHAT IT TESTS: React commit phase and paint timing. ANSWER OUTLINE: Use useLayoutEffect to measure or mutate DOM before paint to stop flicker; useEffect runs after paint. RED FLAG: Using it for data fetching or ignoring its blocking cost.
Why pass a function to useState for expensive initial values?
This tests your understanding of React's render-phase behavior. Without the function, expensive work reruns on every render and is thrown away; the initializer runs once only during mount.
What is the purpose of the useEffect cleanup function?
WHAT IT TESTS: Your grasp of useEffect teardown before re-runs and unmount. ANSWER OUTLINE: Explain cleanup prevents memory leaks by clearing timers or unsubscribing when dependencies change or on unmount.