How does InteractionManager work in React Native?

The InteractionManager module is used to manage interactions between JavaScript code and the native UI thread. It provides a way to schedule tasks to run after all current interactions have completed, which is useful for optimizing performance and ensuring smooth user experience.

When a user interacts with a React Native app, such as tapping on a button or scrolling a list, these interactions are processed by the native UI thread. This thread is responsible for rendering the UI and handling user input. However, running JavaScript code simultaneously with UI updates can lead to performance issues and janky animations.

The InteractionManager module helps mitigate these problems by allowing developers to defer non-critical JavaScript tasks until after the current interaction is complete. This way, heavy computations or other time-consuming operations can be postponed until the user has finished interacting with the UI, resulting in a more responsive app.

Here’s a general overview of how InteractionManager works in React Native:

1. Import the InteractionManager module:

import { InteractionManager } from 'react-native';

2. Schedule tasks using the runAfterInteractions() method:

InteractionManager.runAfterInteractions(() => {
  // Your code to run after interactions
});

You can pass a callback function to runAfterInteractions() which will be executed when the app is in an idle state. The callback function typically contains code that can be deferred, such as network requests, data fetching, or computationally expensive operations.

3. Optionally, you can use the addListener() method to listen for the completion of all interactions:

const interactionListener = InteractionManager.addListener(
  'interactionComplete',
  () => {
    // All interactions have completed
  }
);

This listener allows you to take action when all interactions are finished.

Example:

import React, { useEffect, useState } from 'react';
import { View, Text, InteractionManager, ActivityIndicator } from 'react-native';

const Component = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [data, setData] = useState(null);

  useEffect(() => {
    InteractionManager.runAfterInteractions(() => {
      // Simulating an expensive computation
      const result = performExpensiveComputation();

      // Simulating a network request
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(apiData => {
          setData(apiData);
          setIsLoading(false);
        })
        .catch(error => {
          console.error(error);
          setIsLoading(false);
        });
    });
  }, []);

  const performExpensiveComputation = () => {
    // Simulating a computationally expensive operation
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += i;
    }
    return result;
  };

  return (
    <View>
      {isLoading ? (
        <ActivityIndicator size="large" />
      ) : (
        <View>
          <Text>My Component</Text>
          {data && (
            <Text>Data: {JSON.stringify(data)}</Text>
          )}
          {/* Render your component's UI */}
        </View>
      )}
    </View>
  );
};

export default Component;

In this example, the Component functional component demonstrates the usage of InteractionManager for a more complex scenario. Here are the key points:

1. Inside the useEffect hook, we schedule the tasks to run after interactions using InteractionManager.runAfterInteractions(). In this case, we simulate an expensive computation with the performExpensiveComputation function.
2. While the interactions are taking place, we show an ActivityIndicator to indicate that the component is loading.
3. Simultaneously, we make a network request to fetch data from an API. Once the request is complete, we update the state with the fetched data and set isLoading to false.
4. The fetched data is displayed in the component’s UI when it’s available.
5. Note that the expensive computation is performed in the background during the interactions, thanks to InteractionManager. This ensures that the UI remains responsive, and the component doesn’t block or delay rendering.
6. This example showcases how InteractionManager can be used to handle computationally expensive operations and asynchronous tasks effectively while keeping the UI responsive and providing a smooth user experience.

Overall, the InteractionManager module in React Native helps you manage and prioritize tasks by deferring them until the app is in an idle state, ensuring a smooth and responsive user experience.