More in Mobile Dev — page 6
Redux principles: store, actions, reducers
WHAT IT TESTS: Redux's core model. OUTLINE: 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.
Context re-renders when unrelated value changes
WHAT IT TESTS: Context re-render behavior. OUTLINE: 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
WHAT IT TESTS: scoping state correctly. OUTLINE: 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
WHAT IT TESTS: understanding prop drilling and Context. OUTLINE: 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.
SectionList versus FlatList for grouped data
WHAT IT TESTS: grouped-list data shape. OUTLINE: 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.
FlatList virtualization and windowing trade-offs
WHAT IT TESTS: how windowing works. OUTLINE: 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.
Preventing unnecessary FlatList item re-renders
WHAT IT TESTS: memoization of list rows. OUTLINE: 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.
Optimizing FlatList with variable item heights
WHAT IT TESTS: layout optimization for mixed heights. OUTLINE: implement getItemLayout to return each item's length and cumulative offset so FlatList skips measurement and scrollToIndex works precisely; precompute heights per item type.
Implementing infinite scroll with FlatList
WHAT IT TESTS: pagination with FlatList. OUTLINE: 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
WHAT IT TESTS: FlatList re-render triggers. OUTLINE: 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
WHAT IT TESTS: practical FlatList tuning. OUTLINE: memoize renderItem and items, supply getItemLayout for fixed heights, tune windowSize, maxToRenderPerBatch, initialNumToRender, and removeClippedSubviews; profile first.
FlatList data, renderItem, and keyExtractor
WHAT IT TESTS: core FlatList props. OUTLINE: data is the array, renderItem maps each item to a component, keyExtractor returns a stable unique key letting React reconcile and reuse rows.
ScrollView versus FlatList for long lists
WHAT IT TESTS: rendering strategy. OUTLINE: 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.
Type-safe navigation with TypeScript
WHAT IT TESTS: typing navigation. OUTLINE: 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.
How react-native-screens optimizes a deep stack
WHAT IT TESTS: native screen optimization. OUTLINE: 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.
Configuring deep linking to a parameterized screen
WHAT IT TESTS: end-to-end deep link setup. OUTLINE: register native URL schemes/intent filters, define a linking config with prefixes and screen-to-path mapping including params, pass it to NavigationContainer.
Setting screen options statically versus dynamically
WHAT IT TESTS: static versus dynamic screen options. OUTLINE: options prop on Screen (can read route) versus navigation.setOptions inside the screen for state-driven changes. RED FLAG: trying to set state-based titles via the static options object only.
Accessing navigation outside a screen component
WHAT IT TESTS: getting navigation without the prop. OUTLINE: use the useNavigation hook inside any component under NavigationContainer; for navigating outside React, use a navigationRef. RED FLAG: prop-drilling navigation down manually through many layers.
Refetching data when a screen gains focus
WHAT IT TESTS: knowing focus differs from mount. OUTLINE: use useFocusEffect with a useCallback callback; refetch on focus; clean up to abort stale requests. RED FLAG: relying on useEffect with empty deps, which only fires once on mount.
Structuring an auth flow in React Navigation
WHAT IT TESTS: navigator structuring around auth state. OUTLINE: conditionally render an auth stack versus app stack from state, not navigate calls; store token; let state drive screens. RED FLAG: navigating between stacks manually instead of swapping them.