React.js API Services

API service file is used to:

Manage all API calls in one place

Benefits:

Clean code
Reusable API
Easy maintenance
Easy base URL change

Create services/api.js

import axios from "axios";

const api = axios.create({
  baseURL: process.env.REACT_APP_API_URL,
  headers: {
    "Content-Type": "application/json",
  },
});

export default api;

Use API in Component:

import { useEffect, useState } from "react";
import api from "../../services/api";

function User() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetchUsers();
  }, []);

  const fetchUsers = async () => {
    try {
      const response = await api.get("/api/users");

      setUsers(response.data);
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div>
      <h2>User List</h2>

      {users.map((user) => (
        <p key={user.id}>{user.name}</p>
      ))}
    </div>
  );
}

export default User;

FAQs