Trung BìnhReact Native iconReact Native

`InteractionManager.runAfterInteractions` — use case là gì?

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:

tsx
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+:

tsx
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.

Xem toàn bộ React Native cùng filter theo level & chủ đề con.

Mở danh sách React Native