InteractionManager là API cũ trong RN cho phép defer task nặng cho đến khi animation/transition hoàn thành. Mục đích: tránh block animation, giữ FPS smooth lúc transition.
Use case kinh điển:
function DetailScreen() {
const [data, setData] = useState(null)
useEffect(() => {
// Đừng fetch ngay — wait until navigation animation done
const handle = InteractionManager.runAfterInteractions(() => {
fetchHeavyData().then(setData)
})
return () => handle.cancel()
}, [])
}Khi user navigation.navigate('Detail'), animation slide chạy 300ms. Nếu fetch chạy ngay, JSON.parse + parse data có thể block frame → animation jank. runAfterInteractions đẩy fetch xuống sau animation.
Khi nào KHÔNG cần (2026):
- Native stack từ react-navigation chạy animation trên native thread → JS work không block.
- Reanimated chạy worklet trên UI thread → animation độc lập với JS.
- TanStack Query với useQuery đã có cơ chế suspend/loading state đẹp hơn.
Modern alternative: dùng useTransition từ React 18+:
const [pending, startTransition] = useTransition()
startTransition(() => setHeavyData(...))Trong RN với New Architecture + Fabric, concurrent rendering giúp transition tự nhiên smooth hơn — InteractionManager trở thành legacy.