How do you prevent UI freezes during heavy calculations with InteractionManager?

Short answer

Defer heavy tasks (such as complex data processing or storage) until current animations and touch interactions finish, using InteractionManager.runAfterInteractions.

Explanation

If an app processes a huge array during a screen transition animation, frames freeze and the animation stutters. InteractionManager defers nonurgent calculations until the transition finishes and the screen is stable, keeping it smooth at 60 fps.

Code example

import { InteractionManager } from 'react-native';
import { useEffect } from 'react';

function AnalyticsScreen() {
  useEffect(() => {
    const task = InteractionManager.runAfterInteractions(() => {
      // This code will not run until the screen-opening animation fully completes
      runHeavyDataCalculations();
    });

    return () => task.cancel();
  }, []);

  return <View>{/* ... */}</View>;
}

Common mistakes

• Running intensive queries immediately when entering a screen, interrupting the system's native transition animation.

Follow-up questions

• How do you improve app startup time (Time to Interactive, TTI)?

Sources

• React Native docs — Performance Overview
• React Native docs — requestIdleCallback