📱 React Native Intermediate

What is performance optimization in React Native?

Answer

React Native performance optimization covers multiple layers: 1. Avoid unnecessary re-renders: // React.memo -- prevent re-render if props unchanged: const UserCard = React.memo(({ user, onPress }) => { ... }); // useCallback -- stable function reference: const handlePress = useCallback(() => navigate(user.id), [user.id]); // useMemo -- expensive computation: const sortedUsers = useMemo(() => [...users].sort(), [users]);. 2. FlatList optimization: <FlatList getItemLayout={(_, index) => ({ length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index })} // Fixed height: huge perf win initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} keyExtractor={item => item.id} />. 3. Image optimization: use FastImage (react-native-fast-image) for caching; resize images to display size before showing; use WebP format; lazy load off-screen images. 4. JS thread offloading: heavy computation → react-native-reanimated worklets (UI thread); background tasks → react-native-background-fetch; use InteractionManager for non-urgent work. 5. Bundle size: enable Hermes; use dynamic imports for code splitting; tree-shake unused code; analyze with --bundle-analyze. 6. Inline requires: defer module loading until actually needed. 7. Avoid overdraw: don't use unnecessary backgroundColor on views that overlap; transparent backgrounds are cheaper. 8. Profiling: Flipper + React DevTools Profiler; use Perf Monitor (shake device → Show Perf Monitor); measure JS FPS and UI FPS; look for JS thread FPS drops (JS doing too much work per frame).