API Integration – CRUD Operations in React

Introduction

CRUD stands for Create, Read, Update, and Delete. These four operations form the foundation of most real-world applications such as dashboards, admin panels, blogs, e-commerce systems, and management portals.

In React, CRUD operations are commonly performed by integrating APIs, managing state, and updating the UI dynamically based on server responses.

What Are CRUD Operations?

Basic Flow of CRUD in React

1. User performs an action (form submit, button click)
2. React sends API request
3. Backend processes the request
4. Response updates React state
5. UI re-renders automatically

Setting Up State for CRUD Operations

const [users, setUsers] = useState([]);
const [formData, setFormData] = useState({
  name: "",
  email: "",
});

State stores:

• API data
• Form input values

READ Operation – Fetching Data

Example: Fetch Users List

import { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

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

export default Users;

This is the Read operation.

CREATE Operation – Adding New Data

Example: Add User

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

  fetch("https://jsonplaceholder.typicode.com/users", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
  })
    .then((res) => res.json())
    .then((newUser) => {
      setUsers([...users, newUser]);
      setFormData({ name: "", email: "" });
    });
};

This:

• Sends data to API
• Updates UI instantly
• Clears the form

UPDATE Operation – Editing Existing Data

Example: Update User

const handleUpdate = (id) => {
  fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(formData),
  })
    .then((res) => res.json())
    .then((updatedUser) => {
      setUsers(
        users.map((user) =>
          user.id === id ? updatedUser : user
        )
      );
    });
};

This:

• Updates server data
• Updates UI without reload

DELETE Operation – Removing Data

Example: Delete User

const handleDelete = (id) => {
  fetch(`https://jsonplaceholder.typicode.com/users/${id}`, {
    method: "DELETE",
  }).then(() => {
    setUsers(users.filter((user) => user.id !== id));
  });
};

This:

• Deletes data from server
• Removes item from UI instantly

Complete CRUD UI Example Structure

users.map((user) => (
  <div key={user.id}>
    <span>{user.name}</span>
    <button onClick={() => handleUpdate(user.id)}>Edit</button>
    <button onClick={() => handleDelete(user.id)}>Delete</button>
  </div>
))

CRUD Operations Using Axios

Axios simplifies syntax.

axios.get(url);
axios.post(url, data);
axios.put(url, data);
axios.delete(url);

Example:

axios.post(url, formData).then((res) => {
  setUsers([...users, res.data]);
});

Handling Loading and Error States in CRUD

const [loading, setLoading] = useState(false);
const [error, setError] = useState(null);

Always:

• Show loading indicator
• Handle API failures
• Prevent duplicate submissions

Best Practices for CRUD in React

• Keep API logic clean
• Use controlled forms
• Handle loading and error states
• Update UI optimistically
• Use unique keys for lists
• Separate components for large apps

Common Mistakes in CRUD Operations

• Not updating UI after API call
• Mutating state directly
• Ignoring API errors
• Reloading page unnecessarily
• Hardcoding API URLs

CRUD Operations with Redux Toolkit (Concept)

In large apps:

• Store CRUD data in Redux
• Use createAsyncThunk
• Manage loading and error globally

Recommended for enterprise applications.

Interview Questions and Answers – CRUD in React

1. What does CRUD stand for?

Create, Read, Update, and Delete.

2. Which HTTP method is used to create data?

POST.

3. How does React update UI after CRUD operations?

By updating component state.

4. Should UI reload after CRUD operations?

No, React updates UI dynamically.

5. What hook is commonly used to fetch data?

useEffect.

6. How do you delete an item from UI after API delete?

By filtering state.

7. Can CRUD be done without APIs?

Yes, but APIs are used in real applications.

8. How do you handle form data in CRUD?

Using controlled components.

9. Is Axios better than Fetch for CRUD?

Axios provides cleaner syntax and better error handling.

10. Are CRUD operations essential in React?

Yes, they are core to real-world applications.