Get the Preplance app for a seamless learning experience. Practice offline, get daily streaks, and stay ahead with real-time interview updates.
Get it on
Google Play
4.9/5 Rating on Store
React Native · Question Set
Performance Optimization & Debugging interview questions for placements and exams.
Questions
14
Included in this set
Subject
React Native
Explore more sets
Difficulty
Mixed
Level of this set
Go through each question and its explanation. Use this set as a focused practice pack for React Native.
Slow rendering often happens due to heavy re-renders, large image processing, or unnecessary state updates. Optimizing components with React.memo, compressing assets, and using FlatList for lists can significantly improve UI responsiveness.
For complete preparation, combine this set with full subject-wise practice for React Native. You can also explore other subjects and sets from the links below.
useCallback memoizes function definitions, ensuring the same reference is used between renders unless dependencies change. This prevents child components wrapped with React.memo from re-rendering when their props contain unchanged callback functions.
useMemo caches the result of a function between renders so it only recalculates when dependencies change. It prevents expensive operations from running unnecessarily, improving performance during re-renders.
const value = useMemo(() => computeExpensiveValue(a, b), [a, b]);
React.memo wraps a functional component and skips re-rendering if props are the same as before. It is useful for optimizing list items or child components that receive frequent updates.
export default React.memo(MyComponent);
FlatList uses lazy loading and virtualization, meaning only items currently visible on the screen are rendered. This drastically reduces memory usage and improves performance on large lists.
React uses keys to detect which items are added, removed, or moved. Providing a unique key improves rendering speed and ensures smooth updates to the list.
keyExtractor={(item) => item.id.toString()}Hermes is a small and efficient JavaScript engine designed to improve app startup time and reduce memory usage. It compiles JavaScript ahead of time into bytecode, optimizing performance for Android and iOS.
React Developer Tools includes a Profiler tab that records rendering times of components. It helps identify slow components and optimize re-render-heavy areas in the app.
Forgetting to clear intervals, event listeners, or subscriptions in useEffect cleanup functions can lead to memory leaks. These leaks cause the app to retain unnecessary memory, affecting performance over time.
console.time() and console.timeEnd() measure the duration of code execution between the two calls. They are useful for quick performance checks during development and debugging.
console.time('fetch'); fetchData(); console.timeEnd('fetch');PureComponent helps prevent unnecessary updates by checking whether props or state have actually changed. It’s useful for class components where performance is important, similar to React.memo for functional ones.
Common tools include Flipper, React Developer Tools, Chrome DevTools, and Reactotron. They allow inspecting component hierarchy, viewing logs, tracking Redux actions, and analyzing network performance in real-time.
If the JS thread is blocked by heavy computation or infinite loops, the app becomes unresponsive because UI updates depend on it. To prevent this, offload heavy tasks to native modules or use libraries like react-native-reanimated or worker threads for background execution.
Unoptimized or large images consume significant memory and slow down UI rendering. Use the Image component’s caching features, serve WebP formats, and load lower-resolution thumbnails for previews to enhance speed.