📱 React Native Intermediate

What is performance optimization in React Native?

Why Interviewers Ask This

Candidates at the intermediate level are expected to not only know this concept but explain the trade-offs involved. Interviewers use this question to see if you can reason about design decisions, not just recall facts.

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).

Common Mistake

Rushing to answer is a common mistake. Take two seconds to structure your response: definition → example → trade-off. This structure makes complex React Native answers easy to follow.