Interview
114 bites tagged Interview — interview questions with model answers, and 60-second explainers.
Strategies to type querySelector results as HTMLInputElement
Tests whether you know safe ways to narrow querySelector's Element or null to HTMLInputElement. A strong answer compares type assertions with generic querySelector calls, and insists on null checks. Red flag: asserting without runtime validation.
Describe the difference between DOMContentLoaded and window.load
This tests critical rendering path knowledge. DOMContentLoaded fires after HTML parsing and deferred scripts, while load waits for all subresources; use the former to bind UI early. Defaulting to load, which stalls interactivity until images finish.
Create a generic getProperty using generics and keyof
Whether you can constrain a generic key with keyof and return the exact property type. Use T for the object and K extends keyof T for the key, returning T[K]. Using string for the key allows invalid properties and erases the return type.
Explain the difference between any and unknown, and demonstrate type-safe narrowing
This tests your grasp of TypeScript top types: any disables checking while unknown forces narrowing. A strong answer defines both, accepts unknown, and uses typeof or a type guard before operating. Red flag: saying they are equivalent or relying on as casts.
How do React Profiler flame and ranked charts pinpoint bottlenecks?
Flame chart width and color show duration with children; ranked chart sorts by self-time to surface the top component. Distinguishing flame chart subtree cost from ranked chart self-time. Calling them identical.
What are keys in React lists and why are they important?
Whether you understand React's reconciliation identity tracking. Keys are unique identifiers that let React match items across renders, preserving DOM state and avoiding unnecessary recreation.
How do you opt out of static rendering for real-time data?
Tests Next.js App Router caching and dynamic rendering escape hatches. Cover force-dynamic SSR, ISR with revalidate, noStore, and client fetching; weigh server load vs staleness. Red flag: only CDN purges without segment config or data cache fixes.
What is Next.js Middleware and a real-world auth use case?
This tests request interception before a route renders. A good answer defines Middleware as pre-request code using NextRequest and NextResponse, often on the Edge Runtime, with auth redirects as an example.
What is NextResponse.json() and how does it differ from standard Response?
NextResponse.json() auto-serializes and sets the application/json header; standard Response needs manual JSON.stringify and headers. Knowledge of Next.js helpers over the Web Response API.
Create a basic GET API endpoint in Next.js App Router
Tests App Router backend conventions. Create route.js in an app segment, export async GET with NextRequest and return NextResponse; route.js isolates the endpoint from page.js. Red flag: citing pages/api or raw Node res objects.
How do nested layouts work in the App Router?
Tests nested layout composition and state persistence in the App Router. Good answers explain root wraps dashboard wraps page, dashboard state survives child navigation, and only the page segment rerenders.
How would you avoid new functions per list item without useCallback?
Tests stable handler patterns for large lists. Answer: define one handler outside the map, attach it to every item, and read the id from a data-id attribute via currentTarget.dataset.id. Or use event delegation on the parent. Red flag: useCallback in loop.
When can overusing useMemo hurt performance and what are the trade-offs?
Memoizing cheap work wastes cycles, increases memory use, and burdens dependency tracking. Awareness that useMemo has memory and comparison overhead. Claiming useMemo is free or automatically blocks child re-renders.
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.
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.
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.
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 useEffect dependency array behavior for [], [deps], and omitted
It tests reactive dependency tracking. Omitting re-runs every render; [] runs on mount with cleanup on unmount; [deps] re-runs when Object.is detects change. Red flag: claiming [] means 'run once' without mentioning cleanup or stale values.
What is the difference between async def and regular functions?
This tests async def call semantics. A strong answer contrasts regular functions, which execute immediately, with async def, which returns a coroutine object that does nothing until awaited or wrapped in create_task.
Define a FastAPI endpoint with path and query parameters
Tests if you know FastAPI infers parameter location from the route string. Good answer: route with {item_id}, signature item_id: int, q: str | None = None, noting any param not in the path becomes a query param.
Write an async decorator that logs execution time for FastAPI
Use functools.wraps, wrap perf_counter around awaited call, log ms, and place decorator above path operation. Python closures, async/await, and decorator stacking in FastAPI. forgetting to await the coroutine or omitting wraps.
What is the difference between def and async def in Python and FastAPI?
Tests event-loop boundaries: async def yields control via await for non-blocking I/O, def runs in a threadpool. Use async def only with async libraries; def covers blocking calls. Red flag: claiming async is automatically faster or awaiting inside def.
KPIs for a new registration form and technical instrumentation
Tests pairing outcomes with instrumentation. Pick a conversion KPI and a field-level friction KPI, then explain client-side events correlated with server logs while scrubbing PII. Red flag: relying solely on frontend analytics or vanity metrics.
What technical attributes or metrics would you analyze comparing authentication or search?
Concrete p99 latency, SLA, throughput QPS, security; contrast features versus resilience. Do you break a feature into technical metrics, not marketing bullets? Listing UI differences over engineering metrics.
Get Interview bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.