Understanding Dummy API for React Apps

Rashmi Saini

September 17, 2025

9MIN READ

Learn how dummy APIs accelerate React development by providing static data for seamless UI building and testing without backend dependency.

Developing React applications often requires working with APIs to fetch and display data. However, waiting for backend services to be fully implemented or stable can hinder frontend progress. Dummy APIs provide a practical solution by offering fake data endpoints that developers can use immediately to build, test, and prototype user interfaces.

This article explores dummy APIs for React apps, covering popular online and local options with practical integration steps.

What are Dummy APIs?

Dummy APIs are fake or simulated Application Programming Interfaces that provide predefined or randomly generated data in response to API requests. They act as stand-ins for real backend services during development, allowing frontend developers to build and test their applications without depending on actual APIs that may not yet be available, stable, or complete.

These APIs return sample data, often in JSON format, that mimics the structure and type of responses a real API would provide. This enables developers to work with realistic data models and UI interactions while backend services are still under development or when testing edge cases.

By using dummy APIs, React developers can accelerate frontend development cycles and create predictable, controlled environments for testing and debugging.

Why Use Dummy APIs in React?

Dummy APIs play a vital role in React development by enabling frontend developers to work independently of backend availability. They provide a controlled way to simulate API responses, helping developers build UI components and test functionalities without waiting for real APIs to be ready.

Key benefits of using dummy APIs in React projects include:

Faster Development: Frontend teams can develop and test features simultaneously while backend services are still in progress, accelerating the overall workflow.
Isolated Testing: Dummy APIs allow testing frontend logic in isolation, reducing dependencies on backend stability or network factors.
Consistent Debugging: Predictable and consistent dummy responses help identify and fix UI issues effectively.
Simulating Scenarios: Developers can mimic success states, errors, or edge cases easily, ensuring robust application behavior.
Cost and Resource Efficiency: Using dummy APIs avoids backend resource consumption or API rate limits during development and testing.

By decoupling React frontend work from backend readiness, dummy APIs reduce development bottlenecks, improve testing reliability, and streamline the delivery process.

Popular Dummy APIs for React Apps

When building React applications, developers often turn to publicly available dummy APIs to quickly prototype and test frontend features without waiting for backend services. Here are some widely used dummy APIs popular among React developers:

JSONPlaceholder

A classic choice, JSONPlaceholder provides a free, ready-to-use fake REST API with endpoints for users, posts, comments, todos, and more. It’s reliable, simple, and great for typical CRUD operations in demos and learning.

DummyJSON

DummyJSON offers a rich set of fake JSON data covering products, carts, users, posts, and recipes. It also supports dynamic placeholder images, making it highly useful for e-commerce and content-heavy React apps.

Reqres.in

Reqres is designed for testing frontends with realistic user data and supports common RESTful methods. It allows custom API endpoint creation, enabling testing of various response scenarios.

Beeceptor

Beeceptor provides a hosted mock API platform where you can create custom endpoints with tailored responses, making it ideal for more specific testing scenarios beyond static dummy APIs.

Fake Store API

Focused mainly on e-commerce app prototyping, this API delivers product data, categories, and user ratings to simulate a shopping environment.

Each of these APIs provides straightforward HTTP endpoints returning JSON data, making them ideal for integration with React apps using fetch or axios for seamless frontend development.

How to use a Dummy API in a React App

Integrating dummy APIs into a React app is straightforward and essential for simulating backend data during development. Here’s a step-by-step guide:

Choose a Dummy API

Select a publicly available dummy API such as JSONPlaceholder or DummyJSON, depending on the type of data you need.

Fetch Data from the API

Use fetch or axios to make HTTP requests to the API endpoints. The response is typically in JSON format. For example, using fetch:

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

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 fetching data:', error));
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Render Data in Components

Once fetched, use React state to store the data and render it in components with JSX. Mapping over arrays helps display lists dynamically.

Handle Loading and Errors

Implement loading states and error handling to improve user experience and feedback while data is fetched or if requests fail.

Using dummy APIs in this way enables you to build UI components that behave as if connected to real backend data, accelerating development and making testing easier.

Running a Local Dummy API Server

Running a local dummy API server allows you to create a customized backend simulation tailored to your React app’s needs. This setup enables offline development, precise control over data, and testing of various API behaviors such as errors and delays.

One of the most popular tools for this purpose is JSON Server, which quickly transforms a simple JSON file into a full RESTful API.

Setting Up JSON Server

Follow the steps below to set up the JSON Server:

1. Install JSON Server globally on your development machine using npm:

				
					npm install -g json-server

2. Create a JSON file named db.json in your project root with mock data. For example:

				
					{
  "users": [
    { "id": 1, "name": "John Doe", "email": "john@example.com" },
    { "id": 2, "name": "Jane Doe", "email": "jane@example.com" }
  ]
}

3. Start the JSON Server to serve this data as REST API endpoints:

				
					json-server --watch db.json --port 3001

This command runs the server at http://localhost:3001 with endpoints like /users.

Using the Local Dummy API in React

Now in your React app, you can fetch data from the local server like this:

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

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

  useEffect(() => {
    fetch('http://localhost:3001/users')
      .then(response => response.json())
      .then(data => setUsers(data))
      .catch(error => console.log('Error fetching users:', error));
  }, []);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => (
          <li key={user.id}>{user.name} ({user.email})</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

This setup makes it seamless to develop and test React components with real-like API data locally, even before any backend is ready.

Advanced Mocking and Testing Strategies

Once the basics of dummy APIs are in place, developers can push further by simulating real-world scenarios and stress-testing their React applications. Advanced mocking strategies ensure that the app is not only functional under ideal conditions but also resilient to errors, edge cases, and unpredictable environments.

1. Simulating Network Latency and Failures

In production, APIs rarely respond instantly. By introducing artificial delays and failure states (e.g., 500 Internal Server Error, 404 Not Found), you can validate how your React app handles loading spinners, retries, and error boundaries. Tools like Requestly or custom Express middleware make it easy to inject delays or return error responses.

2. Dynamic Mock Responses

Instead of always serving static JSON, advanced setups can return different responses based on request parameters, headers, or even randomized conditions. For example:

Returning paginated data for ?page=2 queries.
Serving different JSON payloads depending on user roles (admin vs. guest).
Randomly toggling between success and failure responses to test robustness.

3. State-Dependent Mock APIs

A dummy API can be extended to remember state, mimicking how a real backend behaves. For example, a POST /todos call should actually add an item to the in-memory dataset so that a subsequent GET /todos reflects the change. Tools like JSON Server with a custom middleware or Express mock servers support this pattern.

4. Mock Authentication and Authorization

For apps with login flows, mock APIs can simulate:

Token-based authentication (returning a fake JWT).
Expired sessions and token refresh logic.
Role-based access, where some endpoints are restricted for certain mock users.

Best Practices for Working with Dummy APIs in React

Using dummy APIs effectively requires thoughtful planning to ensure your React app behaves realistically and remains maintainable as it grows. Here are some best practices to follow:

Align Mock Data with Real API Contracts: Ensure your dummy API responses match the structure and fields of your real backend API to minimize surprises during integration.
Centralize Mock Data Management: Keep mock data organized in dedicated files or modules to promote reuse and maintain consistency throughout your React app.
Simulate Realistic Behavior: Add artificial delays and error responses in mocks to better replicate real API behavior and improve frontend robustness.
Organize Mocks by Features or Domains: Structure mocks logically by application features or data domains for easier navigation and maintenance in larger projects.
Use Environment-Specific Mocks: Control mock activation via environment variables to enable mocking in development and testing but disable it in production.
Version Control and Documentation: Track mocks in your source repository and document their purpose and limitations to keep the team aligned and informed.
Leverage Mock Automation Tools: Utilize tools like Requestly for easy mock creation, sharing, and automation to boost team productivity.

Enhance Dummy API Usage in React with Requestly API Mocking

While basic dummy APIs provide static data for development, Requestly takes API mocking in React to the next level by allowing dynamic, flexible, and no-code API mocks without changing your application code. With Requestly, you can intercept HTTP requests directly in the browser or via a desktop app and simulate realistic API responses tailored to your app’s needs.

Key benefits of using Requestly with React include:

No code changes needed: Mock existing API endpoints seamlessly without rewriting fetch or Axios calls.
Customizable responses: Define status codes, headers, response bodies, and simulate delays or errors to test edge cases effectively.
Support for REST and GraphQL: Mock queries and mutations selectively to cover complex API schemes.
Session recording: Capture actual API calls from your app and auto-generate mock responses to reflect real user scenarios.
Collaborative workflows: Share mock setups with your team, ensuring consistent and up-to-date mocks across entire development and testing cycles.

To set up Requestly with React, create a “Modify API Response” rule targeting your API endpoint, specify the mock JSON response, enable local serving, and activate the rule. Your React app will then receive these mocked responses transparently, accelerating frontend development and testing without backend dependencies.

By integrating Requestly, developers can enhance dummy API usage with powerful features that simulate production-like API behavior, improve test reliability, and facilitate seamless developer collaboration.

Dummy API vs Mock API

Understanding the difference between dummy APIs and mock APIs is crucial for choosing the right approach in React development and testing.

Dummy APIs provide fixed, static responses regardless of the request parameters. They act as simple placeholders that help developers build UI components when backend APIs are not ready.

Dummy APIs do not include any logic or adaptability, they return the same data every time, making them ideal for early-stage development or basic testing.

Mock APIs, on the other hand, simulate more complex, dynamic behaviors similar to real APIs. They tailor responses based on request details like query parameters, headers, or payload.

This allows testing different scenarios such as filtering, pagination, authentication, and error states. Mock APIs are essential when you need realistic interaction patterns and comprehensive test coverage.

Conclusion

Dummy APIs play a pivotal role in accelerating React development by decoupling frontend progress from backend availability. They enable faster prototyping, reliable testing, and smoother collaboration between teams.

As projects grow, evolving from simple dummy APIs to advanced mocking strategies, including dynamic responses, error simulation, and environment-aware mocks, becomes essential to build resilient, production-ready applications.

Tools like Requestly elevate dummy API usage by offering no-code, flexible, and collaborative mocking solutions that fit seamlessly into modern React workflows.

By following best practices in dummy API design and leveraging powerful mocking tools, developers can significantly improve development speed, test reliability, and overall application quality.

Written by

Rashmi Saini

Following-Sibling XPath in Selenium: Complete Guide

Learn how to use following-sibling XPath in Selenium for precise element selection, handling dynamic content, and creating reliable automation scripts.

Rohit Rajpal

September 17, 2025

How to Handle Stale Element Reference Exception in Selenium

Learn how to handle Stale Element Reference Exceptions in Selenium with causes, techniques, and best practices for stable automation scripts.

Rohit Rajpal

September 17, 2025

How to Automate Testing Using Cucumber Framework in Selenium

Learn how to automate testing with the Cucumber framework in Selenium, including how to set up, write tests, and best practices for efficient test automation.

Rohit Rajpal

September 17, 2025

Understanding Dummy API for React Apps

What are Dummy APIs?

Why Use Dummy APIs in React?

Popular Dummy APIs for React Apps

JSONPlaceholder

DummyJSON

Reqres.in

Beeceptor

Fake Store API

How to use a Dummy API in a React App

Choose a Dummy API

Fetch Data from the API

Render Data in Components

Handle Loading and Errors

Running a Local Dummy API Server

Setting Up JSON Server

Using the Local Dummy API in React

Advanced Mocking and Testing Strategies

1. Simulating Network Latency and Failures

2. Dynamic Mock Responses

3. State-Dependent Mock APIs

4. Mock Authentication and Authorization

Best Practices for Working with Dummy APIs in React

Enhance Dummy API Usage in React with Requestly API Mocking

Dummy API vs Mock API

Conclusion

How to Guides

Case Studies