Performance
508 bites tagged Performance — interview questions with model answers, and 60-second explainers.
Optimize a large form with frequent state updates
Tests render propagation and memoization discipline. Strong answers note parent updates re-render children, extract inputs to localize state, useMemo for derived values, and stable callbacks. Red flag: useMemo everywhere without component boundaries.
Advantages of dedicated React form libraries over manual state
Your grasp of the hidden costs of fully controlled form state in React. Mention re-render reduction via refs, declarative validation, less boilerplate, and custom input support.
Explain Shallow Routing in Next.js Pages Router
This tests URL updates without re-running getServerSideProps or getStaticProps in the Pages Router. A strong answer defines shallow: true, cites query-state UI like filters or modals, and notes same-page and App Router limits.
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.
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.
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.
When would you choose useLayoutEffect over useEffect?
Use useLayoutEffect to measure or mutate DOM before paint to stop flicker; useEffect runs after paint. React commit phase and paint timing. 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.
How does React use keys in reconciliation? When do keys cause bugs?
Tests reconciliation identity semantics. Answer: keys give scoped identity for O(n) diffing; stable keys preserve state, but indices during reordering make React reuse DOM nodes wrongly, polluting state. Red flag: saying keys are 'just for performance'.
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.
UI unresponsive during large data processing on main thread
Tests RN's dual-thread model and 16.67ms frame budget. Strong answers separate JS and UI thread roles, blame long JS tasks for dropped frames, and propose chunking data to yield the event loop. Red flag: claiming memoization alone solves thread blocking.
New Shadow Tree: Async Layout Engine
The New Shadow Tree is React Native's C++ layout engine that runs off the JS thread. It calculates Yoga flexbox asynchronously before mounting native views.
React Native's Legacy Bridge: The Async Bottleneck
The legacy bridge is an async JSON queue between JavaScript and native threads. You see it stutter when a FlatList scrolls or native events flood the pipe. Teams often optimize JavaScript when the real bottleneck is bridge saturation from redundant native…
React DevTools Profiler: Find Slow Renders
The Profiler is a stopwatch for your component tree. It records why each render happened and how long it took, so you can spot unnecessary re-renders in React Native. The footgun is chasing render counts instead of actual frame time.
React Native Gesture Handler: Native-Driven Touch
React Native Gesture Handler moves touch recognition to the native thread so gestures stay smooth when JavaScript is busy. Use it for swipeable cards and bottom sheets. The footgun is using it without Reanimated, gaining complexity without the frame-rate win.
Debugging React Native Performance
React Native drops frames when the JS thread overloads, not just from bad code. Complex re-renders, console.log statements, or dev mode freeze touches and animations. Never trust performance numbers from development builds; always test in release mode.
Write a FastAPI middleware that adds X-Process-Time header
Tests FastAPI lifecycle and header mutation. Strong answers use the http middleware decorator, await call_next, compute elapsed time, and inject X-Process-Time before returning. Red flag: forgetting to await call_next or mutating headers after the return.
How does lifecycle differ for global vs path operation dependencies?
Global deps run on every request to any route; path-local deps run only for that route; expensive setup belongs in a lifespan event or cached singleton, not a dependency. Per-request scoping in FastAPI.
Describe leading vs lagging indicators with technical performance examples.
Tests your ability to distinguish predictors from outcomes. A strong answer defines causality, offers a leading metric like cache hit rate, and a lagging metric like P99 latency. Red flag: offering only business metrics or confusing activity with outcomes.
How would you instrument front-end and back-end to quantify reported slowness?
This tests translating vague complaints into end-to-end telemetry. A strong answer covers front-end Web Vitals, back-end traces, and segments by user or page to isolate pain points. A red flag is focusing only on server CPU or logs without real user timings.
How do UITableView and UICollectionView reuse cells?
This tests your understanding of UIKit's flyweight pattern and scroll performance. A strong answer covers the reuse pool, dequeueReusableCell mapping identifiers to new index paths, and registration.
How would you use Energy Log to investigate battery drain?
Tests correlating Instruments energy metrics to app behavior. Strong answers profile with Energy Log, map CPU/Location/Network spikes to user flows or background work, and validate fixes with before/after logs. Red flag: blaming the OS without evidence.
What build settings improve Time Profiler symbols in Release builds?
This tests debug symbol control in Xcode Release builds. Set DEBUG_INFORMATION_FORMAT to DWARF with dSYM, avoid stripping, citing larger size and slower links. Red flag: suggesting you disable optimizations, invalidating the performance profile.
Which Instrument diagnoses scroll stuttering and dropped frames?
Tests whether you connect UI jank to Instruments data. A strong answer names the Core Animation or Time Profiler instrument, cites frame duration and hitch ratio, and correlates spikes with main-thread work.
Get Performance bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.