Performance
508 bites tagged Performance — interview questions with model answers, and 60-second explainers.
Streaming accelerometer data without bridge overload
The bottleneck is flooding the async bridge and re-rendering at sensor rate; fix by throttling, processing in worklets or native, and animating via shared values not setState. High-frequency data on the bridge.
Animated.event for scroll-driven parallax
Animated.event maps an event path to an Animated.Value, wire it to onScroll with useNativeDriver, then interpolate the value for header transform. Mapping native events to animated values.
Animated API versus Reanimated architecture
Animated declares animations that the native driver runs, but logic and gestures cross the bridge; Reanimated runs worklets directly on the UI thread. Where animation work runs. saying both run fully on JS.
Build a mount fade-in with Animated API
Create an Animated.Value(0) in a ref, drive it with Animated.timing inside useEffect, bind it to opacity on Animated.View. Basic Animated API fluency. animating opacity via setState every frame.
useNativeDriver in the Animated API
Native driver runs animations on the UI thread so they stay smooth even if JS is busy, but only supports non-layout props like transform and opacity. understanding animation performance and the JS bridge.
Memoized selectors with Reselect
Selectors encapsulate state reads, Reselect memoizes computed results by input identity, preventing recomputation and unnecessary re-renders. knowledge of derived state and re-render control.
Context re-renders when unrelated value changes
Every consumer re-renders when the Provider value reference changes, regardless of which field it uses; fix by splitting into separate contexts or memoizing and selecting. Context re-render behavior.
Preventing unnecessary FlatList item re-renders
Extract the row into a React.memo component, pass stable memoized callbacks and primitive props, and keep renderItem referentially stable so only changed items re-render. memoization of list rows.
Optimizing FlatList with variable item heights
Implement getItemLayout to return each item's length and cumulative offset so FlatList skips measurement and scrollToIndex works precisely; precompute heights per item type. layout optimization for mixed heights.
Diagnosing slow FlatList scroll and blank cells
Memoize renderItem and items, supply getItemLayout for fixed heights, tune windowSize, maxToRenderPerBatch, initialNumToRender, and removeClippedSubviews; profile first. practical FlatList tuning.
ScrollView versus FlatList for long lists
ScrollView mounts all children at once; FlatList virtualizes, rendering only on-screen items plus a buffer. Use ScrollView for small/fixed content, FlatList for long/dynamic data. rendering strategy.
How react-native-screens optimizes a deep stack
React-native-screens uses native container views so off-screen screens are detached from the view hierarchy and can be freed; enabled by default and powers the native-stack navigator. native screen optimization.
Gesture Handler and Reanimated on the UI thread
Gesture Handler tracks gestures natively and Reanimated runs worklets on the UI thread, so animations driven by shared values continue smoothly even when the JS thread is blocked. off-JS-thread animation architecture.
How StyleSheet.create reduces styling overhead
StyleSheet styles are created once with stable references, so identical renders skip reallocation and reduce diffing and serialization work; inline literals allocate new objects each render… depth on style identity and serialization.
Inline styles vs StyleSheet.create
Styles are JS objects passed to the style prop; StyleSheet.create registers styles once for stable references and validation, while inline objects recreate on each render. styling fundamentals and object identity.
Improving React Native startup time
Enable Hermes for fast bytecode startup, shrink and lazy-load the JS bundle via inline requires and RAM bundles, and defer non-critical native init. systematic startup profiling.
selectinload vs joinedload for eager loading
Use eager loading options to avoid lazy N+1; joinedload uses a single JOIN (good for many-to-one) but can fan out rows on collections; selectinload issues a second IN query (better for one-to-many). Eager loading to kill N+1 queries.
Streaming large file downloads efficiently
Use StreamingResponse with a generator that yields chunks (or FileResponse for an on-disk file), set media_type and a Content-Disposition header, so memory stays flat regardless of file size. Memory-safe file delivery.
Diagnosing a slow FastAPI endpoint under load
Add timing and tracing to isolate the slow span, watch CPU vs wait time and event-loop lag, then use profilers like py-spy or cProfile and DB EXPLAIN. Systematic performance diagnosis.
Measure a competitor's public performance
Synthetic audits via Lighthouse and WebPageTest, timed public-API probes, and reading response headers. black-box web performance measurement. proposing scraping or load attacks that break terms of service.
V8 generational GC and event loop responsiveness
Young-generation scavenges are frequent but short, old-generation major GC is rarer but longer, stop-the-world pauses block the single JS thread. how GC pauses affect Node latency.
Detecting and diagnosing event loop lag
Measure delay between scheduled and actual timer fire, expose it as a metric, find synchronous CPU-bound code. production diagnosis of a blocked single thread.
Offloading CPU work with worker_threads
Heavy sync work blocks the single event loop and stalls all requests; move it to a Worker, message the input, await the result asynchronously, and ideally pool workers. Keeping the event loop free during CPU-bound work.
Purpose of the Node.js cluster module
Cluster forks worker processes sharing one listening port, so requests spread across CPU cores via the OS, raising throughput and adding resilience. Knowing Node is single-threaded per process and how to use all cores.
Get Performance bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.