Interacting with APIs in React: A Hands-On Tutorial

Table of Contents

1. Understanding APIs and React
2. Prerequisites
3. Setting Up the Project
4. Fetching Data with the Browser’s fetch API
5. Simplifying with Axios: A Third-Party HTTP Client
6. Cleaner Code with async/await
7. Handling Loading and Error States
8. Using useEffect for Data Fetching
9. Building a Reusable Custom Data Fetching Hook
10. API Authentication in React
11. Best Practices for API Interaction
12. Conclusion
13. References

1. Understanding APIs and React

Before we start coding, let’s clarify what APIs are and how they fit into React applications.

What is an API?

An API is a set of rules that allows one software application to interact with another. For web apps, REST APIs (Representational State Transfer) are the most common—they use HTTP methods (GET, POST, PUT, DELETE) to send/receive data, typically in JSON format.

Why APIs Matter in React

React excels at building user interfaces, but it doesn’t handle data storage or server logic. To display dynamic data (e.g., user profiles, product listings), your React app needs to communicate with an API to fetch or send data.

How React Interacts with APIs

React is a client-side library, so API calls are made from the browser. This involves:

• Sending HTTP requests (GET, POST, etc.) to an API endpoint (e.g., https://api.example.com/posts).
• Handling asynchronous responses (since network calls take time).
• Updating the UI with the fetched data using React state.

2. Prerequisites

To follow along, you’ll need:

• Basic knowledge of React (components, hooks like useState and useEffect).
• Familiarity with JavaScript (ES6+, promises, async/await).
• Node.js and npm installed (to create a React app and install dependencies).
• A code editor (e.g., VS Code).
• A public API for testing: We’ll use JSONPlaceholder (a free fake API for testing) and OpenWeatherMap (for weather data, optional).

3. Setting Up the Project

Let’s start by creating a new React project. Open your terminal and run:

npx create-react-app react-api-tutorial
cd react-api-tutorial
npm start

This will spin up a development server at http://localhost:3000. We’ll use this project to experiment with API interactions.

4. Fetching Data with the Browser’s fetch API

The fetch API is a built-in browser tool for making HTTP requests. It’s lightweight and requires no extra dependencies. Let’s use it to fetch data from JSONPlaceholder.

Step 1: Fetch Data on Component Mount

We’ll create a component that fetches a list of “posts” (fake blog posts) from JSONPlaceholder when the component mounts.

Create a new file src/components/FetchExample.js:

import { useState, useEffect } from 'react';

function FetchExample() {
  // State to store fetched data
  const [posts, setPosts] = useState([]);
  // State to track loading status
  const [loading, setLoading] = useState(true);
  // State to track errors
  const [error, setError] = useState(null);

  useEffect(() => {
    // Fetch data when component mounts
    fetch('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        // Check if the request was successful (status 200-299)
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        // Convert response to JSON (returns a promise)
        return response.json();
      })
      .then((data) => {
        // Update state with fetched data
        setPosts(data);
        setLoading(false); // Data loaded, stop loading
      })
      .catch((err) => {
        // Handle errors (network issues, HTTP errors)
        setError(err.message);
        setLoading(false); // Error occurred, stop loading
      });
  }, []); // Empty dependency array: run once on mount

  // Render loading, error, or data
  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error}</div>;

  return (
    <div>
      <h2>Posts from JSONPlaceholder (Fetch API)</h2>
      <ul>
        {posts.slice(0, 5).map((post) => ( // Show first 5 posts
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default FetchExample;

Key Notes About fetch:

• Returns a Promise: fetch returns a promise that resolves to a Response object, not the actual data. You need to call .json() (or .text(), etc.) to parse the response.
• No HTTP Error Rejection: Unlike Axios, fetch only rejects on network failures (e.g., no internet). HTTP errors (404, 500) still resolve, so you must check response.ok to handle them.
• Cleanup: If the component unmounts before the request finishes, you may get a “setState on unmounted component” warning. We’ll fix this later with AbortController.

Step 2: Add the Component to App.js

Update src/App.js to include FetchExample:

import FetchExample from './components/FetchExample';

function App() {
  return (
    <div className="App">
      <h1>Interacting with APIs in React</h1>
      <FetchExample />
    </div>
  );
}

export default App;

Run npm start—you should see 5 posts loaded from JSONPlaceholder!

5. Using Axios: A Third-Party HTTP Client

While fetch is built-in, Axios is a popular third-party library that simplifies API calls with features like automatic JSON parsing, error handling, and request cancellation. Let’s try it.

Step 1: Install Axios

Run in your terminal:

npm install axios

Step 2: Fetch Data with Axios

Create src/components/AxiosExample.js:

import { useState, useEffect } from 'react';
import axios from 'axios'; // Import Axios

function AxiosExample() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // Axios GET request
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then((response) => {
        // Axios automatically parses JSON!
        setPosts(response.data);
        setLoading(false);
      })
      .catch((err) => {
        // Axios rejects on network errors AND HTTP errors (404, 500, etc.)
        setError(err.message);
        setLoading(false);
      });
  }, []);

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

  return (
    <div>
      <h2>Posts from JSONPlaceholder (Axios)</h2>
      <ul>
        {posts.slice(0, 5).map((post) => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.body}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default AxiosExample;

Key Advantages of Axios:

• Automatic JSON Parsing: No need for response.json()—Axios parses JSON by default.
• HTTP Error Rejection: Axios rejects the promise on HTTP errors (4xx, 5xx), making error handling cleaner.
• Shorter Syntax: axios.get(url) is more concise than fetch(url).then(response => response.json()).

Step 3: Send Data with Axios (POST Request)

Axios simplifies sending data too. Let’s add a “Create Post” button to send a POST request:

// Inside AxiosExample.js, add state for new post
const [newPost, setNewPost] = useState({ title: '', body: '' });

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/posts', newPost);
    // JSONPlaceholder returns the created post with an ID
    alert(`Post created! ID: ${response.data.id}`);
    setNewPost({ title: '', body: '' }); // Reset form
  } catch (err) {
    setError(err.message);
  }
};

// Add a form to the JSX
<form onSubmit={handleSubmit}>
  <h3>Create a New Post</h3>
  <input
    type="text"
    placeholder="Title"
    value={newPost.title}
    onChange={(e) => setNewPost({ ...newPost, title: e.target.value })}
    required
  />
  <textarea
    placeholder="Body"
    value={newPost.body}
    onChange={(e) => setNewPost({ ...newPost, body: e.target.value })}
    required
  />
  <button type="submit">Create Post</button>
</form>

Now you can submit a post, and Axios will send a POST request with the form data!

6. Cleaner Code with async/await

async/await is syntactic sugar for promises that makes asynchronous code read like synchronous code. Let’s refactor the fetch and Axios examples with async/await.

Refactoring Fetch with async/await

Update the useEffect in FetchExample.js:

useEffect(() => {
  const fetchPosts = async () => {
    try {
      const response = await fetch('https://jsonplaceholder.typicode.com/posts');
      if (!response.ok) {
        throw new Error(`HTTP error! Status: ${response.status}`);
      }
      const data = await response.json(); // Wait for JSON parsing
      setPosts(data);
      setLoading(false);
    } catch (err) {
      setError(err.message);
      setLoading(false);
    }
  };

  fetchPosts(); // Call the async function
}, []);

This is often cleaner than chaining .then()!

Refactoring Axios with async/await

Similarly, Axios works seamlessly with async/await:

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

  fetchPosts();
}, []);

async/await reduces nested .then() chains and makes error handling with try/catch more intuitive.

7. Handling Loading and Error States

Users hate waiting without feedback! We already added loading and error states earlier, but let’s formalize best practices:

Core States for API Calls

Always include these states to keep users informed:

• loading: true while the request is in progress (show spinners/loaders).
• error: null or an error message if something fails (show user-friendly errors).
• data: The fetched data (render once loaded).

Example UI for States

if (loading) {
  return <div className="loader">🔄 Loading...</div>; // Animated spinner
}

if (error) {
  return (
    <div className="error">
      ❌ Error: {error}
      <button onClick={refetchData}>Try Again</button> // Allow retry
    </div>
  );
}

// Render data once loaded
return <div>{/* Data UI */}</div>;

8. Using useEffect for Data Fetching

useEffect is React’s way to handle side effects (like API calls) in functional components. Here’s how to use it effectively:

Dependency Array

The second argument to useEffect ([]) is the dependency array. It controls when the effect runs:

• []: Run once on mount (like componentDidMount).
• [someState]: Run on mount and whenever someState changes (like componentDidUpdate).

Example: Fetch Data on Search

Let’s fetch posts filtered by a search term. Add a search input and update the useEffect dependency:

const [searchTerm, setSearchTerm] = useState('');

useEffect(() => {
  const fetchFilteredPosts = async () => {
    setLoading(true);
    try {
      const response = await axios.get(
        `https://jsonplaceholder.typicode.com/posts?title_like=${searchTerm}`
      );
      setPosts(response.data);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false); // Run whether success or error
    }
  };

  // Debounce: Wait 500ms after user stops typing to fetch
  const timeoutId = setTimeout(fetchFilteredPosts, 500);

  // Cleanup: Cancel timeout if searchTerm changes before 500ms
  return () => clearTimeout(timeoutId);
}, [searchTerm]); // Re-run effect when searchTerm changes

Now the API call triggers only after the user stops typing (debouncing), reducing unnecessary requests!

Cleanup with AbortController

To prevent “setState on unmounted component” warnings, cancel pending requests when the component unmounts using AbortController:

useEffect(() => {
  const controller = new AbortController(); // Create controller
  const signal = controller.signal; // Get abort signal

  const fetchPosts = async () => {
    try {
      const response = await fetch(
        'https://jsonplaceholder.typicode.com/posts',
        { signal } // Pass signal to fetch
      );
      // ... rest of the code
    } catch (err) {
      if (err.name === 'AbortError') {
        console.log('Request aborted'); // Ignore abort errors
      } else {
        setError(err.message);
      }
    }
  };

  fetchPosts();

  // Cleanup: Abort request if component unmounts
  return () => controller.abort();
}, []);

Axios also supports AbortController via the signal option:

const { signal, abort } = new AbortController();
axios.get(url, { signal }).then(...);
return () => abort(); // Cleanup

9. Building a Reusable Custom Data Fetching Hook

To avoid repeating API logic across components, create a custom hook like useFetch.

Step 1: Create useFetch.js

Create src/hooks/useFetch.js:

import { useState, useEffect } from 'react';

function useFetch(url, options = {}) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchData = async () => {
      try {
        const response = await fetch(url, { ...options, signal });
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }
        const result = await response.json();
        setData(result);
        setError(null);
      } catch (err) {
        if (err.name !== 'AbortError') {
          setError(err.message);
          setData(null);
        }
      } finally {
        if (!signal.aborted) {
          setLoading(false); // Only update if not aborted
        }
      }
    };

    fetchData();

    // Cleanup: Abort request on unmount or url/options change
    return () => controller.abort();
  }, [url, options]); // Re-run if url or options change

  return { data, loading, error };
}

export default useFetch;

Step 2: Use useFetch in Components

Now reuse useFetch anywhere:

// In a component
import useFetch from '../hooks/useFetch';

function PostList() {
  const { data: posts, loading, error } = useFetch(
    'https://jsonplaceholder.typicode.com/posts'
  );

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

  return (
    <ul>
      {posts?.slice(0, 5).map((post) => ( // Optional chaining (`?.`) for safety
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Custom hooks like useFetch keep your code DRY (Don’t Repeat Yourself) and make components focused on UI, not API logic.

10. API Authentication in React

Most APIs require authentication (e.g., API keys, JWT tokens). Let’s cover common methods.

Method 1: API Keys (Public APIs)

Many public APIs (e.g., OpenWeatherMap) use API keys. Store keys in environment variables to avoid exposing them in code.

Step 1: Create a .env File

Create .env in your project root (never commit this to Git!):

REACT_APP_OPENWEATHER_API_KEY=your_api_key_here

Note: Create React App only loads variables prefixed with REACT_APP_.

Step 2: Use the API Key in Requests

Fetch weather data for London using OpenWeatherMap:

import useFetch from '../hooks/useFetch';

function Weather() {
  const apiKey = process.env.REACT_APP_OPENWEATHER_API_KEY;
  const city = 'London';
  const { data, loading, error } = useFetch(
    `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric`
  );

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

  return (
    <div>
      <h2>Weather in {data.name}</h2>
      <p>Temperature: {data.main.temp}°C</p>
      <p>Condition: {data.weather[0].description}</p>
    </div>
  );
}

Method 2: JWT Tokens (Private APIs)

For authenticated users (e.g., after login), APIs often use JWT tokens. Store tokens securely (avoid localStorage for sensitive apps—use HTTP-only cookies instead, but that requires backend setup).

Example: Fetch with JWT Header

const fetchWithToken = async () => {
  const token = localStorage.getItem('jwt_token'); // Not secure for production!
  try {
    const response = await axios.get('/api/user-data', {
      headers: { Authorization: `Bearer ${token}` },
    });
    setUserData(response.data);
  } catch (err) {
    if (err.response?.status === 401) {
      // Token expired: redirect to login
      window.location.href = '/login';
    }
  }
};

11. Best Practices for API Interaction

Follow these practices to build robust, maintainable apps:

1. Separate API Logic into Service Files

Keep API calls in dedicated service files (e.g., src/services/api.js) instead of components:

// src/services/api.js
import axios from 'axios';

const API_URL = 'https://jsonplaceholder.typicode.com';

export const getPosts = async () => {
  const response = await axios.get(`${API_URL}/posts`);
  return response.data;
};

export const createPost = async (postData) => {
  const response = await axios.post(`${API_URL}/posts`, postData);
  return response.data;
};

Then import and use these functions in components:

import { getPosts } from '../services/api';

const { data: posts } = useFetch(getPosts); // Or call in useEffect

2. Use Environment Variables

Store API URLs, keys, and secrets in .env files (never hardcode them!).

3. Cancel Pending Requests

Always use AbortController to cancel requests when components unmount or dependencies change (prevents memory leaks).

4. Debounce Frequent Requests

For search inputs or filters, debounce API calls to wait for the user to stop typing (use setTimeout or libraries like lodash.debounce).

5. Cache Responses

Cache frequent API calls (e.g., with localStorage or libraries like React Query/SWR) to reduce redundant requests and improve performance.

6. Validate Data

APIs may return unexpected data. Use libraries like Zod or Joi to validate responses:

import { z } from 'zod';

// Define schema for a post
const PostSchema = z.object({
  id: z.number(),
  title: z.string(),
  body: z.string(),
});

// Validate response data
const validatedPost = PostSchema.parse(postData);

12. Conclusion

You now have a solid foundation for interacting with APIs in React! We covered:

• Fetching data with fetch and Axios.
• Simplifying async code with async/await.
• Managing loading, error, and data states.
• Building reusable custom hooks like useFetch.
• Authentication with API keys and JWT.
• Best practices for clean, secure, and performant API integration.

To level up, explore advanced tools like React Query or SWR (built by Vercel), which handle caching, invalidation, and background updates out of the box.

Happy coding! 🚀

13. References

• React useEffect Documentation
• MDN fetch API
• Axios Documentation
• JSONPlaceholder (Fake API)
• OpenWeatherMap API
• React Query
• Zod (Data Validation)
• Create React App Environment Variables