React and APIs: A Complete Guide

Why Use APIs in React?

APIs (Application Programming Interfaces) allow React applications to communicate with external services and fetch dynamic data, enabling real-world interactivity.

Fetching Data in React

React provides a flexible way to integrate APIs, commonly using tools like fetch or axios. Let’s explore both approaches.

Fetching Data with fetch

The fetch API is a built-in JavaScript method for making network requests.

Example: Fetching Data from an API

Step 1: Create a React Component

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

function FetchDataComponent() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {data.slice(0, 5).map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default FetchDataComponent;

Explanation

State Management:
- data: Stores the fetched data.
- error: Captures any errors.
- loading: Indicates loading state.
Lifecycle Hook:
- useEffect: Executes the fetch request on component mount.
Error Handling:
- Checks response.ok to catch HTTP errors.

Fetching Data with Axios

Axios is a popular library for making HTTP requests in JavaScript.

Installing Axios

Run the following command:

npm install axios

Example: Fetching Data with Axios

Step 1: Create a React Component

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

function AxiosDataComponent() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    axios
      .get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        setData(response.data);
        setLoading(false);
      })
      .catch((error) => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {data.slice(0, 5).map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default AxiosDataComponent;

Benefits of Axios Over Fetch

Simplified Syntax: Axios automatically parses JSON responses.
Error Handling: Built-in support for catching HTTP errors.
Request/Response Interception: Allows adding headers or transformations.
Additional Features: Supports timeouts, cancellation, and progress tracking.

Handling Async/Await

Example: Fetching Data with Async/Await

Step 1: Using Async/Await with Axios

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

function AsyncAwaitComponent() {
  const [data, setData] = useState([]);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/posts');
        setData(response.data);
        setLoading(false);
      } catch (error) {
        setError(error.message);
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

  return (
    <ul>
      {data.slice(0, 5).map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
}

export default AsyncAwaitComponent;

Best Practices for API Integration

Use .env Files for API Keys:

Store sensitive keys in a .env file and access them with process.env.

REACT_APP_API_KEY=your-api-key

Access in code:

const apiKey = process.env.REACT_APP_API_KEY;

Centralize API Logic:

Create a separate utility for API requests.

import axios from 'axios';

const api = axios.create({
  baseURL: 'https://jsonplaceholder.typicode.com/',
});

export default api;

Use Loading States:
- Show a spinner or placeholder while data loads.
Implement Retry Logic:
- Retry failed requests using Axios interceptors.
Paginate Data:
- Fetch data in chunks instead of loading all at once.