Comparison of fetch and axios in React Native

import React, {useEffect, useState} from 'react';
import {View, Text, StyleSheet, SafeAreaView} from 'react-native';
import axios, {AxiosResponse} from 'axios';

interface Post {
  userId: number;
  id: number;
  title: string;
  body: string;
}

const App = (): JSX.Element => {
  const [fetchPost, setFetchPost] = useState<Post | {}>({});
  const [axiosPost, setAxiosPost] = useState<Post | {}>({});

  useEffect(() => {
    const fetchRequest = async () => {
      try {
        const response = await fetch(
          'https://jsonplaceholder.typicode.com/posts/1',
        );

        const data: Post = await response.json();
        setFetchPost(data);
      } catch (error) {
        console.log('Error during fetch operation:', error);
      }
    };

    const axiosRequest = async () => {
      try {
        const response: AxiosResponse<Post> = await axios.get(
          'https://jsonplaceholder.typicode.com/posts/1',
        );

        setAxiosPost(response.data);
      } catch (error) {
        console.log('Error during axios request:', error);
      }
    };

    fetchRequest();
    axiosRequest();
  }, []);

  return (
    <SafeAreaView style={styles.container}>
      <View>
        <Text style={styles.text}>Fetch Post:</Text>
        <Text style={styles.text}>{(fetchPost as Post).title}</Text>
      </View>

      <View>
        <Text style={styles.text}>Axios Post:</Text>
        <Text style={styles.text}>{(axiosPost as Post).title}</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white',
  },
  text: {
    fontSize: 18,
    marginVertical: 5,
    color: 'black',
  },
});

export default App;

In the realm of React Native application development, effectively managing network requests stands as a fundamental necessity. One of the pivotal questions developers face is which HTTP client library to employ, with fetch and axios emerging as prominent choices. The features, ease of use, and performance of each play a crucial role in determining the preferred option.

To begin with, the fetch API, originating as a browser-based standard, is also applicable in the React Native environment. However, when used in its raw form, it can introduce additional overhead. Notably, advanced features such as JSON transformations, error handling, and interceptors might require manual management. While affording developers more control, this can also result in increased code verbosity and potential error sources.

On the other hand, the axios library is explicitly designed as an HTTP client for managing requests. This library offers a more user-friendly API with advanced features. Automatic JSON transformations, interceptors, and request cancellation are among the features that enable developers to work more efficiently. This is particularly crucial in large and complex projects, aiming to reduce code redundancy and facilitate maintenance.

Axios’s interceptors provide flexible control over HTTP requests and responses. This proves highly beneficial in scenarios where specific headers need to be added before sending requests or certain checks applied before receiving responses. For instance, handling user authentication information with each request or addressing global errors becomes easily manageable with this feature.

Another advantage of Axios is its request cancellation capability. This feature is especially useful when a user navigates away from a page or when a specific request becomes unnecessary. It prevents unnecessary network traffic, contributing to improved application performance.

However, as with any set of advantages, there are corresponding trade-offs. The rich feature set of axios can lead to an increased library size. In such cases, the decision to accept this added size should be evaluated based on project requirements and target platforms.

In conclusion, the choice between fetch and axios depends on the project’s scale, complexity, and the preferences of the development team. While fetch offers a more minimalist solution, axios provides comprehensive features and a user-friendly experience. Therefore, making the right choice aligned with the project’s needs and developer expectations is a critical step for effective HTTP client management.