All bites
The whole library, newest first. Filter by what you are here for, or pick a topic if you already know.
4330 bites
Page 57
Diagnosing slow FlatList scroll and blank cells
Memoize renderItem and items, supply getItemLayout for fixed heights, tune windowSize, maxToRenderPerBatch, initialNumToRender, and removeClippedSubviews; profile first.
Re-rendering FlatList on external state change
FlatList is a PureComponent and only checks data and extraData by reference, so pass the external value via extraData and ensure renderItem reads current state.
Implementing infinite scroll with FlatList
Use onEndReached with onEndReachedThreshold to fetch the next page, append results, and show a footer loader; guard with a loading flag to prevent duplicate fetches.
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.
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.
FlatList virtualization and windowing trade-offs
FlatList renders only items within a window of viewports around the visible area, unmounting others; larger windowSize means fewer blanks but more memory, smaller means less memory but more blank flashes.
SectionList versus FlatList for grouped data
FlatList takes a flat data array; SectionList takes a sections array of objects each with a data array and optional title, and supports renderSectionHeader and sticky headers.
Prop drilling and the Context API
Prop drilling is threading props through many intermediate components that do not use them; Context provides a value to a subtree so consumers read it directly.
Local state versus global state management
Keep state local with useState/useReducer when it is used by one component or its subtree; reach for Redux or Zustand when many distant components share and mutate the same state.
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.
Redux principles: store, actions, reducers
One store holds all state; actions are plain objects describing what happened; pure reducers compute the next immutable state from current state and action; dispatch drives the cycle.
Handling async API calls in Redux
Middleware intercepts dispatched actions, Thunk dispatches functions for simple flows, Saga uses generators for complex orchestration.
Redux versus Zustand state management
Redux uses actions, reducers, and a Provider with structured boilerplate; Zustand offers a minimal hook-based store with no provider and selective subscriptions.
Memoized selectors with Reselect
Selectors encapsulate state reads, Reselect memoizes computed results by input identity, preventing recomputation and unnecessary re-renders.
State normalization for relational data
Store entities by id in lookup tables, reference relationships by id, avoid nesting and duplication.
Offline-capable state architecture
Persist state locally, queue mutations while offline, apply optimistic updates, then sync and reconcile conflicts on reconnect.
Axios advantages over fetch
Axios auto-parses JSON, rejects on HTTP error status, and offers interceptors, timeouts, and cancellation out of the box.
Robust network error handling strategy
Classify errors as 4xx, 5xx, or connectivity; retry transient failures with backoff, surface actionable messages, and check NetInfo.
Axios interceptors for auth headers
Interceptors are hooks that run before requests or after responses, centralizing concerns like auth, logging, and token refresh.
Cancelling fetch with AbortController
Pass an AbortController signal to fetch and call abort() on unmount to avoid wasted work, race conditions, and state updates on gone components.