performance-optimization

Stop excessive re-renders by applying React.memo to list items and using useMemo for expensive computations. This ensures components only re-render when their specific props change, reducing jank in list-heavy views.

The best way to optimize animations is to centralize them at the layout level rather than applying per-item animations. This approach avoids performance pitfalls and maintains smooth UX in animation-heavy flows.

FlashList performs better by enforcing optimized list rendering patterns over FlatList. You must also use a stable keyExtractor to ensure items track correctly across renders and avoid unnecessary component mounting.

You need memoization when list-heavy components perform expensive computations or render frequently. Apply useMemo and useCallback to cache values and functions, preventing unnecessary recalculations during re-renders.

Guard data-fetching by applying debounced inputs to minimize rerenders and control network requests. This prevents rapid successive fetches that degrade performance during user interaction in list views.

You can apply these deterministic rules and checks during code reviews to verify list rendering patterns, memoization strategies, animation placement, and data-fetch guards are satisfied before merging.