Day 5 of #100DaysOfCode — Fetching Data in React (useEffect + fetch + axios)

Data fetching is one of the most fundamental skills in modern React development. Whether you’re building dashboards, blogs, authentication systems, or e-commerce stores — your app almost always needs to get data from somewhere outside itself.

In today’s session, I focused on understanding what data fetching actually is, why we need it, and how to use fetch() and axios inside React with useEffect.

Let’s break it all down in simple terms.

What Is Data Fetching?

Data fetching simply means getting data from an external source, such as:

• an API


• a database


• a server


• a backend service

In other words:

Data fetching is how your React app communicates with the outside world to get dynamic information.

If React only used built-in data, every app would feel static and useless.

🤔 Why Not Just Hard-Code the Data Inside the React App?

Technically, we "could" hard-code the data, but that only works for small apps… small as in 'your never completing untitled project' small, not "I actually need this to work tomorrow" small :).

Here’s why real apps must fetch data:

1. Data changes frequently

User details, comments, product prices, weather updates — these constantly change. You can’t update your app manually every time.

2. Shared data comes from a backend

React apps connect to APIs that store and manage the real data.

3. Better performance & scalability

Instead of shipping massive data with your frontend bundle, you only fetch what you need.

4. Security

Sensitive data should NOT be stored inside the frontend code where anyone can inspect it.

Basically:

• Hard-coded data = toy projects


• Fetched data = real-world apps

Different Types of Data Fetching Methods in React

There are several ways to get data in React apps:

1. 
   fetch() API — Built-in browser function


2. 
   Axios — A popular third-party HTTP client


3. 
   React Query / TanStack Query — A data management library


4. 
   SWR — A lightweight data fetching library


5. 
   GraphQL clients (Apollo, urql) — For GraphQL APIs

But for starters, the most common and straightforward methods are:

• fetch()


• axios

And that’s exactly what my Day 5 is about.

Using useEffect for Data Fetching in React

React components re-render many times. If we fetch data directly inside the component, it will run on every render — and that is... well.... That's bad!

So we wrap data fetching inside useEffect:

useEffect(() => {

  // fetch data here

}, []);

The [] ensures the fetching happens only once when the component first loads.

What Are fetch() and axios?

Fetch()

• A built-in JavaScript API.


• Already available in all modern browsers.


• Lightweight but sometimes verbose.

Axios

• A third-party library (you install it: npm i axios).


• 
  

  More powerful features like:

  
  
  
  
  
  • automatic JSON parsing
  
  
  • better error handling
  
  
  • request interceptors
  
  
  • cancel tokens
  
  
  • timeouts
  
  
  
  
  
  

Both help you send requests like:

• GET (retrieve data)


• POST (send data)


• PUT/PATCH (update data)


• DELETE (remove data)

Fetching Data Using fetch() in React (with useEffect)

Here’s a clean, beginner-friendly example:

import { useEffect, useState } from "react";



export default function App() {

  const [users, setUsers] = useState([]);



  useEffect(() => {

    fetch("https://jsonplaceholder.typicode.com/users")

      .then(response => response.json())

      .then(data => setUsers(data))

      .catch(error => console.error("Error:", error));

  }, []);



  return (

    <div>

      <h2>Users List (Fetched with fetch())</h2>

      {users.map(user => (

        <p key={user.id}>{user.name}</p>

      ))}

    </div>

  );

}

Key Features of fetch():

• Native support


• Uses Promises


• Requires manual JSON parsing


• Error handling can be tricky

Fetching Data Using Axios in React (with useEffect)

First install Axios:

npm install axios

Then use it like this:

import { useEffect, useState } from "react";

import axios from "axios";



export default function App() {

  const [posts, setPosts] = useState([]);



  useEffect(() => {

    axios

      .get("https://jsonplaceholder.typicode.com/posts")

      .then(res => setPosts(res.data))

      .catch(err => console.error(err));

  }, []);



  return (

    <div>

      <h2>Posts List (Fetched with Axios)</h2>

      {posts.map(post => (

        <p key={post.id}>{post.title}</p>

      ))}

    </div>

  );

}

Key features of Axios:

• Automatically parses JSON


• Cleaner syntax


• Better error handling


• Supports request cancellation


• Allows interceptors (e.g., for attaching tokens)

fetch() vs axios — Which One Should You Use?

When to Use Which?

Use fetch() if you want:

• zero dependencies


• native browser support


• a simple GET request

Use axios if you want:

• cleaner, shorter code


• automatic JSON conversion


• robust error handling


• interceptors for authentication


• more complex API interaction

Both are great — but Axios tends to be easier and more pleasant for real-world apps.

Conclusion

Day 5 was all about understanding how React really talks to APIs.

Learning data fetching sets the foundation for advanced topics like caching, state management, and React Query.

Tomorrow, the journey continues.

Happy coding!