Working with live APIs is one of the most important skills for a React developer. Whether you're building a simple weather app or a full-fledged eCommerce platform, communicating with a server to fetch, update, or delete data is essential.

In this blog post, we’ll cover how to use live APIs in React using all HTTP methods—GET, POST, PUT, PATCH, and DELETE. Don’t worry if you’re just starting out—I'll break everything down into simple steps with examples so that anyone can follow along.

What is a Live API?

A live API is an external service you can interact with in real-time. Instead of working with fake or mock data, a live API returns actual responses from a real server. This is great for testing your app with real-world scenarios.

Popular examples of live APIs include:

  • Weather APIs like OpenWeatherMap

  • Currency exchange APIs like exchangerate.host

  • REST APIs from services like JSONPlaceholder or your own backend

Tools You Need Before We Start

To use live APIs in React, you need:

  • Basic React knowledge

  • A React project (created via create-react-app or Vite)

  • An internet connection

  • A tool like axios or the Fetch API (built-in)

We'll use both axios and fetch in this tutorial so you can pick what suits you best.

Installing Axios (Optional)

Axios makes it easier to send HTTP requests.

To install:

npm install axios

You can also use the native fetch() method, but axios simplifies some things like error handling and request cancellation.

HTTP Methods in a Nutshell

Here’s a quick overview of the HTTP methods we’ll use:

  • GET – Fetch data

  • POST – Create new data

  • PUT – Update entire data

  • PATCH – Update partial data

  • DELETE – Remove data

Let’s Start Coding

We'll use  JSONPlaceholder as our live API. It provides fake but real-time accessible endpoints for learning purposes.

1. GET – Fetching Data

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

const GetData = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(response => setPosts(response.data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      <h2>All Posts</h2>
      {posts.map(post => (
        <div key={post.id}>
          <h4>{post.title}</h4>
          <p>{post.body}</p>
        </div>
      ))}
    </div>
  );
};

export default GetData;

This fetches a list of posts when the component mounts and displays them.

2. POST – Creating New Data

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

const CreatePost = () => {
  const [title, setTitle] = useState('');
  const [body, setBody] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();

    axios.post('https://jsonplaceholder.typicode.com/posts', {
      title,
      body,
      userId: 1
    })
    .then(response => console.log('Post Created:', response.data))
    .catch(error => console.error('Error creating post:', error));
  };

  return (
    <form onSubmit={handleSubmit}>
      <input value={title} onChange={e => setTitle(e.target.value)} placeholder="Title" />
      <textarea value={body} onChange={e => setBody(e.target.value)} placeholder="Body" />
      <button type="submit">Create Post</button>
    </form>
  );
};

export default CreatePost;

This sends data to the server to create a new post.

3. PUT – Updating Entire Data

PUT replaces the whole object.

const updatePost = () => {
  axios.put('https://jsonplaceholder.typicode.com/posts/1', {
    id: 1,
    title: 'Updated Title',
    body: 'Updated body content',
    userId: 1
  })
  .then(response => console.log('Post Updated:', response.data))
  .catch(error => console.error('Error updating post:', error));
};

4. PATCH – Updating Partial Data

PATCH updates only what you specify.

const patchPost = () => {
  axios.patch('https://jsonplaceholder.typicode.com/posts/1', {
    title: 'Patched Title'
  })
  .then(response => console.log('Post Patched:', response.data))
  .catch(error => console.error('Error patching post:', error));
};


5. DELETE – Deleting Data

const deletePost = () => {
  axios.delete('https://jsonplaceholder.typicode.com/posts/1')
    .then(() => console.log('Post Deleted'))
    .catch(error => console.error('Error deleting post:', error));
};

This removes the post with ID 1.

Tips for Working with Live APIs in React

Here are a few tips to make your API work smooth:

  1. Use useEffect: Only call APIs when you need them. For GET requests, use useEffect.

  2. Handle Errors: Always use .catch() or try/catch to avoid crashing your app.

  3. Show Loading States: Let users know when data is being fetched.

  4. Debounce or throttle requests: If you're making frequent API calls (e.g., while typing), consider using debounce.

  5. Environment Variables: Store your API keys securely using .env files.

Using Fetch Instead of Axios

Want to use fetch? Here's the same GET request using fetch:

useEffect(() => {
  fetch('https://jsonplaceholder.typicode.com/posts')
    .then(res => res.json())
    .then(data => setPosts(data))
    .catch(err => console.error(err));
}, []);

Both work great—it’s just a matter of preference.

Wrapping Up

Working with live APIs in React is an essential part of building modern web applications. Whether you're fetching data with GET, creating with POST, or updating with PUT/PATCH, it's all about understanding when and how to use each method.

Using tools like axios and fetch, and following best practices like error handling and loading states, will make your apps more robust and user-friendly.