How to Fetch API Data in React Using useEffect

Brian Cheruiyot — Sun, 27 Jul 2025 15:03:40 +0000

Fetching data from an API is a common task in React applications. The easiest way to handle this in functional components is by using the useEffect hook along with useState.

In this steps, we’ll learn how to:

Fetch API data in React
Show loading and error states
Render the data on the screen

Prerequisites

Basic knowledge of React and JavaScript
Node.js installed on your machine

1. Create a New React App

You can start with Create React App or any React boilerplate:

npx create-react-app fetch-demo
cd fetch-demo
npm start

2. Setup the Component

We’ll fetch data from the JSONPlaceholder API (a free test API).

Here’s the basic setup:

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

function App() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((data) => setPosts(data));
  }, []);

  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

What’s happening?

useState([]) → Stores the posts.
useEffect() → Runs after the component renders, fetching the data once.
fetch() → Gets the data and updates the state.

3. Add Loading and Error States

To make the UI better, let’s add loading and error handling:

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

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => {
        if (!response.ok) {
          throw new Error("Failed to fetch data");
        }
        return response.json();
      })
      .then((data) => setPosts(data))
      .catch((err) => setError(err.message))
      .finally(() => setLoading(false));
  }, []);

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

  return (
    <div>
      <h1>Blog Posts</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>{post.title}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Now your app:

Shows Loading... while data is fetched
Displays an error message if something goes wrong

You’ve successfully built a React component that fetches data from an API using useEffect and handles loading and error states. This pattern is essential for any real-world React application.

Fetching Data from APIs in JavaScript Made Easy

Brian Cheruiyot — Sun, 29 Jun 2025 09:26:18 +0000

Have you ever wanted your website or app to display real-time information, such as weather updates, random quotes, or user data? If so, you're thinking about using an API.

An API (Application Programming Interface) lets your application communicate with another service to send or receive data. In JavaScript, the easiest way to work with APIs is by using the built-in fetch() method.

Let’s explore how it works in a simple and beginner-friendly way.

🧠 What Is fetch()?

The fetch() function allows you to send HTTP requests (like GET, POST, etc.) to a server and get a response, usually in JSON format.

Here's the basic syntax:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

🔍 Let’s Understand Each Step

fetch('https://api.example.com/data')

Sends a GET request to the specified URL.

2..then(response => response.json())
Converts the response into a JavaScript object.

3..then(data => console.log(data))
You now have the data! You can display it or use it however you like.

4..catch(error => console.error('Error:', error))
Catches any errors, such as a network issue or an invalid URL.

🧪 Real Example: Getting Random User Data

Let’s use a real API that gives us random user information:

fetch('https://randomuser.me/api/')
  .then(response => response.json())
  .then(data => {
    const user = data.results[0];
    console.log(`Name: ${user.name.first} ${user.name.last}`);
  })
  .catch(error => console.error('Something went wrong:', error));

✉️ Sending Data with a POST Request

Sometimes, you’ll want to send data to an API, like when submitting a form. Here's how to do that:

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    title: 'Hello World',
    body: 'This is a blog post',
    userId: 1,
  }),
})
  .then(response => response.json())
  .then(data => console.log('Post created:', data))
  .catch(error => console.error('Error:', error));

✨ Cleaner Code with async/await

A modern and more readable way to fetch data is using async and await:

async function getUser() {
  try {
    const response = await fetch('https://randomuser.me/api/');
    const data = await response.json();
    const user = data.results[0];
    console.log(`User: ${user.name.first} ${user.name.last}`);
  } catch (error) {
    console.error('Error fetching user:', error);
  }
}

getUser();

💡 Tips for Working with APIs

✅ Always handle errors with .catch() or try...catch.
✅ Use browser DevTools (Network tab) to inspect requests and responses.
✅ Many free APIs are available for practice, such as:

Dog API

https://dog.ceo/dog-api/

🚀 Final Thoughts

APIs are powerful tools that bring your websites and apps to life with real-world data. Whether you're building a news feed, a weather app, or a fun fact generator, fetch() makes it easy to get started.

Start experimenting with your favorite APIs and turn your JavaScript skills into something dynamic and interactive! 💻⚡

DEV Community: Brian Cheruiyot