React Native Assignment– 8

Performance Optimization

Basic Questions

  1. Profile an app screen with React Native Performance Monitor (FPS) and record baseline FPS/memory while scrolling a long list.
  2. Add React.StrictMode to your root component and fix at least two warnings it surfaces.
  3. Replace inline arrow functions in a FlatList renderItem with memoized callbacks; measure re-render reduction.
  4. Extract a list row into a separate component and wrap it with React.memo; prove fewer re-renders using a console counter.
  5. Create a custom areEqual(prev, next) comparison for the memoized row to ignore unchanged props.
  6. Add a stable keyExtractor and implement getItemLayout for a FlatList of fixed-height rows; measure initial render time.
  7. Move dynamic style objects out of render into StyleSheet.create; verify no new object identities per render.
  8. Memoize a computed “total cart price” with useMemo and show it avoids recalculation on unrelated state updates.
  9. Memoize a button onPress handler with useCallback; verify child doesn’t re-render when sibling state updates.
  10. Create a SectionList and optimize section header rendering with React.memo + stable props.
  11. Add a simple expensive calculation in render, then move it to useMemo with proper deps; log before/after timings.
  12. Identify and remove at least one unnecessary state/prop that caused child re-renders.
  13. Convert an always-static icon component to React.memo and confirm it renders once.
  14. Implement shouldComponentUpdate in a small class component to block re-renders when props are shallow-equal.
  15. Compare behavior by converting the same class to PureComponent; document differences you observe.
  16. Split a large screen into smaller presentational components; verify parent re-renders don’t cascade.
  17. Add lazy image loading for a ScrollView of images using a placeholder component.
  18. Install react-native-fast-image and swap a standard <Image> list to FastImage; compare scroll jank.
  19. Preload hero images at app start with FastImage and confirm instant display later.
  20. Serve WebP images on Android and measure bundle/network savings relative to PNG/JPG.

Intermediate Questions

  1. Build a products list with a “filter by category” feature; implement filtering via useMemo to prevent recompute on unrelated state changes.
  2. In a FlatList of buttons, memoize each onPress with useCallback and pass stable props; verify row render counts with a counter.
  3. Create a custom hook useStableStyles that returns memoized styles based on inputs; replace inline style creations.
  4. Implement a context for theme; then split contexts (colors, typography, spacing) to reduce provider-driven re-renders; measure impact.
  5. Use a selector pattern with context (custom useThemeSelector(selectFn)) to subscribe only to specific slices; prove fewer re-renders.
  6. Add dynamic import with React.lazy + Suspense for a heavy chart component; show a skeleton fallback while loading.
  7. Lazy-load a screen in your navigator (stack or tabs) and verify reduced initial bundle load time.
  8. Dynamically import react-native-maps only when visiting a “Map” tab; measure memory before/after opening the tab.
  9. Implement platform-specific dynamic imports: load a GPS tracking library only on mobile platform that needs it.
  10. Replace a large utility library with a tree-shaken alternative; use a bundle analyzer to verify size drop.
  11. Add getItemLayout + initialNumToRender tuning for a FlatList and compare Time To Interactive.
  12. Implement windowSize and maxToRenderPerBatch tuning for FlatList to improve scroll FPS.
  13. Create a render budget by throttling a frequently updated progress UI with requestAnimationFrame.
  14. Add InteractionManager.runAfterInteractions to defer non-critical work after navigation.
  15. Memoize selector-derived props for row components to avoid tearing when parent state updates.
  16. Implement a debounced search input (300ms) that filters with useMemo; ensure list rows don’t re-render on each keystroke.
  17. Convert a frequently re-rendered controlled TextInput to an uncontrolled input with commit-on-blur; compare re-render counts.
  18. Use a lightweight image component that supports priority and caching (FastImage) and set priority for above-the-fold assets.
  19. Build a tiny useWhyDidYouUpdate debug hook and apply it to a noisy component to identify prop churn.
  20. Add a “perf mode” flag that disables non-essential animations/effects on low-end devices; detect device class and toggle automatically.

Advanced Questions

  1. Create a reconciler demo: intentionally cause prop identity changes (new objects/functions each render) and then fix them with useMemo/useCallback; chart render counts before/after.
  2. Compose a memoized row that consumes context via a selector hook and prove it doesn’t re-render when unrelated context values change.
  3. Implement a virtualized grid (2D) using FlatList with numColumns and memoized cells; ensure smooth 60 FPS scrolling with images.
  4. Build a custom areEqual that ignores function props by comparing stable IDs from a useEvent/useCallbackRef utility; validate correctness with unit tests.
  5. Add code splitting for features: dynamically import three feature screens and prefetch the next likely screen after user action; measure navigation latency.
  6. Dynamically import heavy native modules (maps, vision) only when a feature toggles on; free resources on toggle off if supported; log memory usage deltas.
  7. Implement an image pipeline: responsive sources (1x/2x/3x), FastImage caching, and on-the-fly resize with react-native-image-resizer for uploads; compare upload sizes & time.
  8. Add an image lazy loader for FlatList with visibility-based loading (via onViewableItemsChanged); ensure offscreen images never mount until visible.
  9. Create a “perf dashboard” screen that reports: average render time per component, list dropped frames, cache hit rates, and bundle chunk sizes; surface top 5 offenders with links to the component source.
  10. Final Hands-on Project:
    • Optimize a medium app: apply React.memo + custom compares, useMemo/useCallback, context splitting + selectors
    • Tune FlatList/SectionList (keyExtractor, getItemLayout, windowSize, initialNumToRender, maxToRenderPerBatch)
    • Introduce lazy-loaded screens/components & dynamically imported heavy libraries
    • Implement an image strategy: FastImage caching, responsive assets, WebP, lazy loading, and resizing for uploads
    • Measure before/after: FPS, TTI, bundle size, render counts, memory; document the improvements and trade-offs