Improving Efficiency of React Native Screen with Multiple API Calls

Understanding the Performance Bottleneck

When a screen initializes, it often needs to fetch data from several endpoints simultaneously. A naive implementation might fire these requests sequentially or ignore the lifecycle of the component entirely. If the user navigates away before the requests complete, the app may attempt to update state on an unmounted component, leading to warnings or crashes. Furthermore, redundant requests triggered by rapid re-renders can cause unnecessary server load and battery drain on mobile devices.

The core issue is not just speed, but control. You need a mechanism to cancel in-flight requests if they are no longer needed. Without this, your application accumulates "zombie" tasks that consume resources without contributing to the current view. Properly structuring your data fetching logic ensures that the UI remains responsive and that memory usage stays low even during complex interactions.

Implementing Cancellation with AbortController

The standard way to handle request cancellation in modern JavaScript environments is the AbortController API. In React Native, you should instantiate this controller inside a useEffect hook. The controller provides an abort() method that you call in the cleanup function returned by useEffect. This signals to the underlying network stack that the response is no longer required.

import { useEffect, useState } from 'react';
import axios from 'axios';

const MyScreen = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const controller = new AbortController();
    
    const fetchData = async () => {
      try {
        const response = await axios.get('/api/data', {
          signal: controller.signal
        });
        setData(response.data);
      } catch (error) {
        if (!axios.isCancel(error)) {
          console.error('Fetch failed:', error);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      controller.abort();
    };
  }, []);

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

This pattern ensures that if the component unmounts, the request is aborted immediately. It also prevents the finally block from updating state if the component is already gone, although checking for mounted status is still a good defensive practice in older codebases. Note that we check axios.isCancel to distinguish between actual network errors and intentional cancellations.

Parallel Execution vs Sequential Chaining

If your APIs are independent, you should execute them in parallel rather than waiting for one to finish before starting the next. Using Promise.all allows you to wait for multiple asynchronous operations to complete simultaneously. This reduces the total time spent waiting for network round-trips.

const [users, setUsers] = useState([]);
const [posts, setPosts] = useState([]);

useEffect(() => {
  const controller = new AbortController();
  
  Promise.all([
    axios.get('/api/users', { signal: controller.signal }),
    axios.get('/api/posts', { signal: controller.signal })
  ])
  .then(([userRes, postRes]) => {
    setUsers(userRes.data);
    setPosts(postRes.data);
  })
  .catch((error) => {
    if (!axios.isCancel(error)) {
      console.error('One or more requests failed');
    }
  });

  return () => controller.abort();
}, []);

However, if there are dependencies between calls—for example, you need a user ID from the first call to fetch their posts—you must chain them using async/await. While this increases latency slightly, it is necessary for logical correctness. Always wrap such chains in try-catch blocks to handle failures gracefully.

Debouncing and Request Coalescing

In some scenarios, users might trigger actions rapidly, such as typing in a search bar. Sending an API call for every keystroke is inefficient. Implementing debouncing ensures that you only send the request after the user has stopped interacting for a specified period. Additionally, if multiple components request the same resource, consider implementing request coalescing where a single request serves all pending consumers.

For deeper insights into handling external API responses safely, see React Native Webview: Handling External API Response before URL Load. This article discusses strategies for ensuring data integrity before rendering, which complements our approach to fetching primary screen data.

State Management and Loading Indicators

Efficient screens provide immediate feedback to the user. Use a loading state to display skeletons or spinners while data is being fetched. Avoid showing blank screens, as this creates a poor user experience. When using multiple calls, track the completion status of each individually or use a global loading state that resets only when all critical data is ready.

Consider using libraries like React Query or SWR for advanced caching and background refetching. These tools handle many of the edge cases discussed above, including deduplication and stale-while-revalidate patterns, allowing you to focus on UI logic rather than boilerplate networking code.

Frequently Asked Questions

What happens if an API call fails partially?

If you use Promise.all, any rejection causes the entire promise to reject, meaning you get no data if one endpoint fails. To handle partial failures, use Promise.allSettled, which returns the status of each promise regardless of success or failure, allowing you to render whatever data was available.

How do I prevent memory leaks in functional components?

Memory leaks usually occur when callbacks or subscriptions remain active after unmounting. Always return a cleanup function from useEffect that cancels ongoing requests, removes event listeners, and clears timers. This ensures that no background tasks attempt to update state on a destroyed component instance.

Is Axios better than Fetch for React Native?

Axios automatically transforms JSON and handles HTTP errors more intuitively than native fetch. However, both support AbortController. Axios is generally preferred in React Native for its simpler syntax and built-in request/response interceptors, which help centralize authentication and error handling logic.

Can I reuse API clients across different screens?

Yes, creating a singleton API client or using a context provider allows you to share configuration and interceptors across your app. This promotes consistency in headers, base URLs, and error handling strategies, reducing duplication and making it easier to update endpoints globally.

Why does my screen flicker on reload?

Flickering often happens because the initial state is undefined, causing a re-render once data arrives. Pre-initialize your state variables with empty arrays or null values so the layout structure exists before data loads. Using skeleton loaders that match the final layout dimensions can further smooth out this transition.