InteractionManager
- React Native course
- Intermediate
- Lesson 92/116
- 5 min
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.
Practice 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>.
Starter code
// Import InteractionManager
// Import useEffect and useState
function HeavyScreen() {
const [ready, setReady] = useState(false);
// In useEffect call InteractionManager.runAfterInteractions
// Return a cleanup that cancels the handle
return <Text>{ready ? 'Ready' : 'Wait'}</Text>;
}Sample 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>;
}Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Match each concept to its role
| Term | Meaning |
|---|---|
InteractionManager |
Defers work |
runAfterInteractions |
Callback after interaction |
animation |
Example interaction |
useEffect |
Where to load |
2 The runAfterInteractions call
InteractionManager.____(() => { setData(heavyData); });InteractionManager.runAfterInteractions(() => { setData(heavyData); });Explanation: runAfterInteractions runs the callback after interactions.
3 What does InteractionManager do?
InteractionManager.runAfterInteractions(() => {});- Sends push notifications
- Styles the list
- Sends API requests
- Runs heavy work after interactions Correct answer
Explanation: InteractionManager defers heavy work until after interactions.