Intermediate everything in Frontend Dev, page 15
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.
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?
Explain cleanup prevents memory leaks by clearing timers or unsubscribing when dependencies change or on unmount.
How do you fetch data with useEffect and prevent memory leaks?
This tests useEffect async lifecycle and cleanup. A good answer places fetch inside useEffect, uses an ignore flag or AbortController to block state updates after unmount, and includes deps. A red flag is skipping cleanup and letting a late response set state.
What will count be after three setCount calls in a row?
Tests React state batching and stale closures. Answer: count is 1 because all three calls read the same closed-over value of 0. Fix: pass an updater function setCount(c => c + 1) three times so React queues each update.
Explain prop drilling and why it's a problem
Tests coupling in deep React trees. Good answers define prop drilling as forwarding props through unused intermediaries, cite coupling and refactor pain, and name Context or composition as fixes. Red flag: calling props bad or jumping to Redux without Context.
What is a React Fragment and why use it over a div?
This tests JSX semantics and DOM hygiene. A strong answer says Fragments group children without wrapper nodes, preventing extra DOM and invalid HTML like divs in tables. A red flag is citing performance without mentioning DOM structure or semantics.
Describe two patterns for conditional rendering in JSX
First, early return with if/else for branches; second, ternary or logical AND inside JSX for inline toggles.
What is the purpose of React's key prop and index key risks?
This tests React reconciliation. Keys give stable identity to match components across renders and preserve state. Indices break on reorder or delete, causing state bugs. A red flag: saying keys are only for performance or indices are harmless.
Zustand Middleware: Intercept Every Set Call
Zustand middleware intercepts set calls to add logging, persistence, or devtools without touching business logic. Use it when updates need the same side effect, like localStorage sync.
Accessible React Forms: Labels, Focus, and Errors
Accessible React forms need real labels, keyboard focus, and error announcements, not just ARIA. Screen reader users must perceive inputs and validation without visual cues. The common footgun is placeholder text or divs instead of label elements with htmlFor.
HashRouter: routing without server configuration
HashRouter traps routes after a # the server never sees, letting SPAs run on static hosts like GitHub Pages without rewrite rules. The tradeoff is ugly URLs and SEO blind spots since search engines may ignore whatever follows the hash.
BrowserRouter: Real URLs in React SPAs
BrowserRouter turns the address bar into a client-side navigation system, using real URLs without reloads. It is the default choice for SPAs that need shareable links.
BEM: Self-Documenting CSS Class Names
BEM turns classes into a mini filesystem: Block__Element--Modifier. It prevents CSS collisions in large React codebases where many teams share a global stylesheet. The footgun is turning every nested tag into an element and creating comically long names.
Server vs. Client Components in Next.js
Next.js forces a render boundary. Server Components generate HTML without sending JavaScript, while Client Components ship JS for interactivity. The footgun is importing a heavy library into a Server Component via a child, bloating the client bundle.
Rules of Hooks: Call Order Is Sacred
Hook calls must keep the same order every render because React maps them to state by array index. Only call hooks at the top level of React functions. Break the order and React desyncs, producing stale state or crashes.
React Reconciliation: The Virtual DOM Diff
React diffs a lightweight in-memory tree against the next render to apply only surgical changes to the real DOM. It fires on every state or prop change. Missing keys in lists force React to rebuild more nodes than needed, destroying performance.
Yup: Schema Builder for Runtime Validation
Yup is a validation pipeline: schemas parse, coerce, and assert untrusted data in one pass. Use it for API payloads or forms while TypeScript infers types automatically.
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