Performance
508 bites tagged Performance — interview questions with model answers, and 60-second explainers.
Prerendering vs SSR in SvelteKit: trade-offs?
Prerender generates static HTML at build, SSR renders on each request, prerender wins on speed but requires static data. understanding of build-time vs request-time rendering and its implications.
How does NODE_ENV=production change Express behavior?
NODE_ENV is a convention signal, production disables verbose logging and enables caching. understanding environment-specific optimizations and conventions.
WebSocket optimization for high-frequency data?
Large payloads increase latency, frequent tiny messages waste overhead, solutions include compression, selective fields, and batching. real-time protocol efficiency and data transfer optimization.
postMessage vs SharedArrayBuffer in worker_threads tradeoffs?
Structured cloning copies data, SharedArrayBuffer shares memory. IPC performance and memory model understanding. cloning has overhead but safety isolation, SharedArrayBuffer is zero-copy but requires atomic operations.
Using personas to drive technical decisions
Derive constraints like device, network, accessibility from personas; let them shape framework, payload shape, performance budgets. Connecting user context to engineering choices.
Diagnose a slow, laggy Figma prototype
Heavy raster images and effects, layer and node count, and excessive prototype interactions. ability to debug Figma performance systematically. blaming the device or vaguely saying delete things without a method.
SVG icons versus icon fonts: technical trade-offs
SVG is vector markup, crisp, multicolor, accessible, and tree-shakeable; icon fonts ship as glyphs, risk anti-aliasing blur, accessibility hacks, and load-failure boxes. Advocate SVG for modern apps. Icon delivery trade-offs.
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. Awareness of runtime style cost. Ignoring hydration or recommending runtime CSS-in-JS without caveats.
Threading of native module methods
Methods run on a dedicated native module queue, not the UI thread; long blocking work stalls other module calls; offload to a background executor or override methodQueue, returning results via promise. native module threading.
The legacy React Native Bridge architecture
JS, native, and shadow threads communicate via an async, batched, JSON-serialized Bridge. knowing the old three-thread Bridge model. calling the Bridge synchronous, ignoring serialization cost, or confusing it with JSI.
Why the New Architecture Replaced the Bridge
The old bridge was async, serialized to JSON, and a single batched channel causing latency; JSI replaces it with direct synchronous C++ interop. motivation for the New Architecture.
Why react-native-gesture-handler Replaces the Responder System
The JS responder system runs on the JS thread so gestures lag under load; gesture-handler runs recognition natively for smooth, reliable gestures. gesture handling limits.
Debouncing a Search TextInput with Hooks
Keep input in state, in an effect set a timer that fires the search after a delay, clear the timer on each change so only the final pause triggers the call. debounce with hooks.
StyleSheet.create and Inline Style Tradeoffs
Styles are JS objects of subset-CSS properties; StyleSheet.create validates them and yields stable references, while inline objects allocate each render. RN styling model. claiming RN uses real CSS or cascading.
How do you catch RN performance regressions?
Track TTI, JS and UI thread FPS, and memory; baseline them and gate CI with automated tools like Flashlight, using the React profiler and DevTools to diagnose. performance strategy and metrics.
Contrast the legacy bridge with JSI
Bridge is async, serialized JSON, and batched; JSI enables direct synchronous C++ calls with no serialization, cutting latency and enabling lazy native modules. architectural comparison depth.
How do you move a 500ms blocking task off the JS thread?
Offload to a native module or C++ TurboModule, a worklet/worker thread, or chunk the work and yield; never block JS. concurrency strategy in RN. wrapping a synchronous loop in a Promise and assuming it stops blocking.
What is bridge traffic and what causes dropped frames?
The bridge passes batched, serialized JSON messages between JS and native asynchronously; high-frequency events flood it. understanding the legacy async bridge.
Which two Flipper plugins diagnose an unresponsive UI?
Use the React DevTools profiler to find expensive renders and the Performance/Hermes plugin to spot a blocked JS thread or low FPS. practical profiling workflow.
What is Hermes and its advantages over JSC?
Hermes is an open-source engine optimized for RN, with faster startup via precompiled bytecode and lower memory use. knowledge of the JS engine powering RN. claiming Hermes JITs or always beats JSC at peak throughput.
useMemo and useCallback for stable references
UseMemo caches a computed value, useCallback caches a function identity across renders; both prevent recompute and unnecessary re-renders of memoized children. Memoization hooks.
Cost of console.log and production-safe debugging
Each console.log serializes data and, when devtools are attached, crosses the bridge synchronously, blocking the JS thread; strip logs in release and use Flipper, dev tools, or remote crash and analytics tools. Debug logging cost.
FlatList and list virtualization
Use FlatList (or SectionList) which virtualizes, rendering only items near the viewport and recycling as you scroll, unlike ScrollView which mounts everything. Efficient long lists. putting a huge map of items in a ScrollView.
The JS thread and why it bottlenecks performance
A single thread runs your JS, React reconciliation, and event handling; blocking it delays updates and gestures, and it is separate from the UI thread. RN threading basics.
Get Performance bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.