React Native
InteractionManager
Learn smooth interaction with InteractionManager.
What is InteractionManager?
InteractionManager is the API that defers heavy work until after user interactions. If you run a heavy computation while an animation or scroll is going, smoothness drops; InteractionManager.runAfterInteractions(callback) keeps that work waiting until the interaction ends.
A typical use case: when a screen opens, load heavy data slightly later instead of right away. Inside useEffect you write InteractionManager.runAfterInteractions(() => setData(heavy)). This keeps the opening fast. When the interaction ends the callback runs and the data arrives. It is a built-in React Native API; no extra package needed.
runAfterInteractions
runAfterInteractions takes a callback and waits until all interactions end. Its return value is a promise-like object; you can also chain with .then(). The cancel() method cancels the pending work.
Example: const handle = InteractionManager.runAfterInteractions(() => { setReady(true); });. If the component unmounts, calling handle.cancel() stops the pending callback from running; this prevents memory leaks. Returning this cleanup from useEffect sets up a healthy flow. Batching several heavy tasks instead of queueing them one by one also helps.
Exercise Defer with InteractionManager
Write a HeavyScreen component. Hold a ready state with useState(false). Inside useEffect, call InteractionManager.runAfterInteractions; the callback should call setReady(true). Return handle.cancel() as cleanup. The component returns <Text>{ready ? 'Ready' : 'Wait'}</Text>.
Show example solution
import { useEffect, useState } from "react";
import { Text, InteractionManager } from "react-native";
function HeavyScreen() {
const [ready, setReady] = useState(false);
useEffect(() => {
const handle = InteractionManager.runAfterInteractions(() => {
setReady(true);
});
return () => handle.cancel();
}, []);
return <Text>{ready ? "Ready" : "Wait"}</Text>;
}
Test yourself
-
Match each concept to its role
- InteractionManager
- Defers work
- runAfterInteractions
- Callback after interaction
- animation
- Example interaction
- useEffect
- Where to load
-
The runAfterInteractions call
InteractionManager.____(() => { setData(heavyData); });
Show answer
InteractionManager.runAfterInteractions(() => { setData(heavyData); });
-
What does InteractionManager do?
InteractionManager.runAfterInteractions(() => {});
- Sends push notifications
- Styles the list
- Sends API requests
- Runs heavy work after interactions
Show answer
Runs heavy work after interactions — InteractionManager defers heavy work until after interactions.
Next lesson: Summary - Performance
