React Native React Native State Management & Performance 2 — Questions and Answers
Question 1: What does the useCallback hook optimize in React Native?
- Async function execution
- Memoizes callback functions to prevent unnecessary re-creation (Correct answer)
- Manages callback queues
- Handles error callbacks
Correct answer: Memoizes callback functions to prevent unnecessary re-creation
useCallback returns a memoized version of a callback that only changes if its dependencies change, preventing child re-renders.
Question 2: What is the Hermes JavaScript engine and why is it used in React Native?
- A testing framework
- A lightweight JS engine optimized for React Native's performance (Correct answer)
- A state management tool
- A navigation library
Correct answer: A lightweight JS engine optimized for React Native's performance
Hermes is a JavaScript engine built by Meta specifically for React Native, offering faster app startup and reduced memory usage.
Question 3: Which React Native optimization prevents unnecessary re-renders of functional components?
- React.lazy()
- React.memo() (Correct answer)
- React.cache()
- React.prevent()
Correct answer: React.memo()
React.memo wraps a functional component and skips re-rendering if its props haven't changed, similar to PureComponent for classes.
Question 4: What causes unnecessary re-renders in React Native components?
- Using too many components
- Passing new object or function references as props on every render (Correct answer)
- Using StyleSheet.create
- Having deep component trees
Correct answer: Passing new object or function references as props on every render
Creating new object or function references on each render breaks referential equality checks, causing child components to re-render unnecessarily.
Question 5: What is the purpose of the useReducer hook?
- To reduce the bundle size
- To manage complex state logic using actions and a reducer function (Correct answer)
- To compress images
- To optimize list rendering
Correct answer: To manage complex state logic using actions and a reducer function
useReducer is an alternative to useState for managing complex state transitions using a reducer function that handles action types.
Question 6: How does the InteractionManager API improve React Native performance?
- It batches multiple API calls
- It defers heavy work until after animations and interactions complete (Correct answer)
- It manages touch interactions
- It optimizes component tree interactions
Correct answer: It defers heavy work until after animations and interactions complete
InteractionManager.runAfterInteractions() schedules tasks to run after all animations and interactions finish, keeping the UI smooth.
React Native React Native State Management & Performance 2
What does the useCallback hook optimize in React Native?