Search
Find a bite, explore a topic or look for a role.
Results for “React”
Bites 747
Platform-specific file extensions
Name files Component.ios.js and Component.android.js; import without the extension and the bundler picks the right one per platform.
Apollo's normalized cache
Apollo flattens query results into entities keyed by type plus id, so one object is stored once and shared, updating everywhere at once.
Optimistic UI updates for actions
Update UI immediately on the assumption of success, send the request, then confirm or roll back on failure.
GraphQL versus REST data fetching
One endpoint, client-specified fields avoid over- and under-fetching; Apollo's useQuery returns loading, error, and data while caching results.
Axios interceptors for auth headers
Interceptors are hooks that run before requests or after responses, centralizing concerns like auth, logging, and token refresh.
Axios advantages over fetch
Axios auto-parses JSON, rejects on HTTP error status, and offers interceptors, timeouts, and cancellation out of the box.
Memoized selectors with Reselect
Selectors encapsulate state reads, Reselect memoizes computed results by input identity, preventing recomputation and unnecessary re-renders.
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.
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.
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.
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.
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.
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.
Diagnosing slow FlatList scroll and blank cells
Memoize renderItem and items, supply getItemLayout for fixed heights, tune windowSize, maxToRenderPerBatch, initialNumToRender, and removeClippedSubviews; profile first.
Type-safe navigation with TypeScript
Define a ParamList mapping screen names to param types, type Screen via NativeStackScreenProps, and type useNavigation with the navigation prop generic so route names and params autocomplete.
Configuring deep linking to a parameterized screen
Register native URL schemes/intent filters, define a linking config with prefixes and screen-to-path mapping including params, pass it to NavigationContainer.
Refetching data when a screen gains focus
Use useFocusEffect with a useCallback callback; refetch on focus; clean up to abort stale requests.
Stack Navigator vs Tab Navigator and nesting
A Stack pushes and pops screens for hierarchical drill-down; a Tab switches between parallel top-level sections. Nesting a Stack in each tab gives each tab its own independent push/pop history.
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.
Gesture Responder System lifecycle
A single view becomes the responder for a touch; onStartShouldSetResponder claims it at touch start, onMoveShouldSetResponder claims it on movement, then grant, move, and release callbacks fire.