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.
Previous
How do you implement authentication in React Native?
Next
What is CodePush (App Center) and OTA updates?
More React Native Questions
View all →- Intermediate What is the React Native New Architecture?
- Intermediate What is React Navigation nested navigators?
- Intermediate How do you handle network requests in React Native?
- Intermediate What are Native Modules in React Native?
- Intermediate What is the difference between react-native-reanimated and the Animated API?