LogoفارسیFA

Asynchronous Data in React – Simulating API Fetching with useEffect and Promises

In React, data is often fetched asynchronously from external sources. This article demonstrates how to simulate asynchronous data fetching using Promises and useEffect. We start with mock data, introduce a delay to mimic network latency, and manage state updates with useState. This is the first step toward integrating real APIs into React applications.

asynchronous dataPromiseuseEffectAPI simulation

~2 min read • Updated Oct 22, 2025

Introduction


In React applications, data is typically fetched asynchronously from servers or databases. This means components render first, and data arrives later. In this article, we simulate this behavior using mock data and a delayed Promise to mimic real-world API fetching.


Defining a Simulated Fetch Function


We start by creating a function that returns a Promise with sample data after a delay:


const getAsyncStories = () =>
  new Promise((resolve) =>
    setTimeout(() => resolve({ data: { stories: initialStories } }), 2000)
  );

This function mimics a network request that resolves after 2 seconds.


Using useEffect to Load Data


In the App component, we initialize the list as an empty array and use useEffect to load data:


const [stories, setStories] = React.useState([]);

React.useEffect(() => {
  getAsyncStories().then(result => {
    setStories(result.data.stories);
  });
}, []);

The empty dependency array ensures the effect runs only once when the component mounts.


Render Behavior and Loading Flow


Initially, the list is empty and nothing is rendered. After 2 seconds, the Promise resolves, the state updates, and the component re-renders to display the loaded stories.


Benefits of This Approach


  • Simulates realistic API behavior
  • Prepares the app for real data integration
  • Uses useState and useEffect for clean state and side-effect management

Conclusion


This article showed how to simulate asynchronous data loading in React using Promises and useEffect. It’s a foundational technique for connecting to real APIs and managing dynamic data in user interfaces.


Written & researched by Dr. Shahin Siami

Next Article