Performance
508 bites tagged Performance — interview questions with model answers, and 60-second explainers.
React Native's Performance Monitor Overlay
Think of it as a quick, in-app speedometer for your app's performance. Toggle it from the Dev Menu for a live overview on your screen. The footgun: it's only a guide, not a precise tool for deep performance analysis.
useNativeDriver: Offload Animations from the JS Thread
useNativeDriver offloads animations from the JavaScript thread to the native UI thread for smoother performance. Use it in Animated API calls to prevent dropped frames.
Memoized Selectors: Avoid Needless Re-renders
A memoized selector caches its result, re-running only if its inputs from the Redux store change. Use it to compute derived data like a filtered list without triggering needless re-renders.
Jotai for React Native: Atomic State, Native Performance
Jotai brings minimalist, atomic state management to React Native, treating state as small, independent pieces. It's ideal for sharing state without prop drilling and offers full compatibility out of the box, including persistence via `atomWithStorage`.
Shopify FlashList: Fixing React Native's Blank Cells
FlashList is a performant drop-in replacement for React Native's FlatList. It recycles components to eliminate blank cells during fast scrolling in long lists. The footgun is assuming it fixes all performance issues, not just rendering.
VirtualizedList: The Engine Behind React Native Lists
VirtualizedList is the engine behind React Native's efficient lists, rendering only visible items to save memory. Use it when FlatList isn't flexible enough, like for immutable data. The main footgun: component state is lost when items scroll out of view.
Memoizing List Items with `React.memo`
Wrap list items in `React.memo` to prevent them from re-rendering when their props are unchanged. In a `FlatList`, this stops items from re-rendering just because the list scrolled, keeping the UI smooth. The footgun is assuming it's a free optimization.
React Native: Infinite Scroll with onEndReached
The `onEndReached` prop is a callback that fires when you scroll near a list's end, letting you fetch more data. Use it in `FlatList` for feeds or catalogs. The main footgun: it can fire multiple times, so use a loading flag to prevent redundant API.
SectionList: Displaying Grouped Data Efficiently
SectionList renders long lists grouped into sections, like a contact list. It virtualizes content, rendering only visible items to save memory. A common footgun: it won't re-render on external state changes unless you pass that state via the `extraData` prop.
FlatList: Performant Virtualized Lists in React Native
FlatList is a "window" over your data, only rendering visible items to save memory and keep scrolling smooth. It's ideal for long lists like feeds or contacts. The main footgun: if items don't update, you forgot to pass changing state to the `extraData` prop.
Native Stack Navigator: Native Performance, Less Customization
Native Stack Navigator uses the OS's built-in screen management for smooth, performant transitions. Use it for standard screen stacks where a native look and feel is key.
React Native Reanimated: Off-Thread Animations
Reanimated moves animations off the busy JavaScript thread onto the native UI thread. This ensures smooth, 60-120 fps performance for gestures and transitions, even during heavy JS computation.
ScrollView: For Simple, Bounded Content
ScrollView is a container for a limited amount of scrollable content, rendering everything inside at once. Use it for short forms or articles where upfront loading is fine. The footgun: it's slow for long lists—use FlatList instead to avoid performance hits.
Hermes: The JS Engine for Faster React Native Apps
Hermes is a JavaScript engine optimized for React Native that prioritizes fast startup and low memory use. It's the default for new apps, pre-compiling JS to bytecode at build time. The footgun: don't just check a global variable; benchmark release builds.
SQLAlchemy: Control When Your Relationships Load
SQLAlchemy's default lazy loading is convenient but can cause an N+1 query storm. Use eager loading (`joinedload`, `selectinload`) for collections you'll access to prevent many database round trips.
The Python GIL: One Thread at a Time
The Python Global Interpreter Lock (GIL) is a mutex ensuring only one thread executes Python bytecode at a time. This serializes CPU-bound threads, but the lock is released during I/O, making it effective for network-bound tasks.
Python Concurrency vs. Parallelism
Concurrency is juggling tasks; parallelism is doing them at once. In Python, use concurrency (threading/asyncio) for I/O-bound work like API calls, and parallelism (multiprocessing) for CPU-bound tasks.
Python's async/await: Concurrent, Not Parallel
async/await lets a single Python thread juggle multiple tasks, pausing one to work on another while it waits for I/O. It's ideal for network requests or database queries. The footgun: it won't speed up CPU-bound tasks, it only helps with waiting.
Heap Snapshots: Finding Node.js Memory Leaks
A heap snapshot is a photograph of your app's memory. Use it to diagnose leaks by comparing snapshots over time to see which objects grow. The big footgun: taking one freezes your app and can double memory usage, risking a crash in production.
Optimize Node.js Images with Multi-Stage Builds
Multi-stage builds separate your build environment from your final runtime. This lets you use heavy tools to build your Node.js app, then ship only the lean production code, drastically reducing image size and attack surface.
NODE_ENV: Flipping the 'Production' Switch
Setting NODE_ENV=production is like telling your Node.js app it's showtime, not rehearsal. This triggers performance optimizations in frameworks like Express, such as view caching and less verbose errors.
SharedArrayBuffer: True Shared Memory for JS Threads
SharedArrayBuffer is a shared whiteboard for JS threads, letting them access the same memory without slow data copies. It's used for high-performance parallel tasks. The footgun: without `Atomics` to coordinate, you'll get race conditions and corrupted data.
Node.js perf_hooks: A High-Precision Stopwatch for Your App
The `perf_hooks` module is a high-precision stopwatch for your Node.js code, offering nanosecond accuracy. Use it to benchmark async operations or HTTP request durations.
Backpressure: Don't Drown Your Node.js Streams
Backpressure is flow control for streams, preventing a fast producer from overwhelming a slow consumer, like a traffic light for data. It's crucial when piping a fast file read to a slow network write. Ignoring it causes data to buffer and crash your app.
Get Performance bites daily.
Five a day, five minutes, offline. With quizzes so it sticks.
Open testing — you’ll join as an early tester.