jutsu-react-native:react-native-performance

Optimize FlatList rendering by implementing getItemLayout to pre-calculate item heights, memoizing renderItem with React.memo to prevent unnecessary re-renders, and setting removeClippedSubviews to true. These techniques reduce jank and improve scroll performance on data-heavy screens.

Reduce bundle size through code-splitting, dynamic imports, and bundle analysis tools to identify large dependencies. Removing unused code and optimizing asset loading directly decreases initial load time and improves startup performance.

Use React.memo to memoize components, useCallback to stabilize function references, and useMemo to cache computed values. These patterns prevent child components from re-rendering when parent props haven't changed, reducing frame drops during interactions.

Yes, implement image caching by storing downloaded images locally and lazy-loading images only when they enter the viewport. This reduces memory overhead and network calls on image-intensive screens, enabling smoother scrolling and faster initial render.

Jank typically results from expensive re-renders, synchronous operations, or heavy image loading during scroll. Profiling with React DevTools and platform tools reveals bottlenecks; memoization, async image loading, and FlatList optimization eliminate frame drops.

Profiling practices include using React DevTools Profiler to measure component render times, Flipper to inspect native performance metrics, and systrace to analyze JavaScript execution. Regular profiling surfaces slowdowns before deployment and validates optimization effectiveness.