`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:

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.

InteractionManager is a legacy RN API that defers heavy work until animations/transitions finish — meant to keep FPS smooth during transitions.

Classic use case:

function DetailScreen() {
  const [data, setData] = useState(null)
  useEffect(() => {
    // Do not fetch immediately — wait until the nav animation is done
    const handle = InteractionManager.runAfterInteractions(() => {
      fetchHeavyData().then(setData)
    })
    return () => handle.cancel()
  }, [])
}

When the user calls navigation.navigate('Detail'), the slide animation runs ~300 ms. Fetching immediately could block a frame (JSON.parse + transforms) and jank the animation. runAfterInteractions defers the fetch.

When you do NOT need it (2026):
- Native-stack react-navigation runs animations on the native thread, so JS work does not block.
- Reanimated runs worklets on the UI thread — animation is independent of JS.
- TanStack Query has nicer suspend/loading states.

Modern alternative: React 18+ useTransition:

const [pending, startTransition] = useTransition()
startTransition(() => setHeavyData(...))

With the New Architecture + Fabric, concurrent rendering naturally smooths transitions — InteractionManager is becoming legacy.