Handling Loading & Error - ReactJS

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

 

1. Kenapa Harus Menangani Loading & Error?

Saat mengambil data dari API di React, kita nggak selalu dapat hasil yang instan. Kadang butuh waktu (loading), kadang malah error. Nah, supaya UI tetap responsif dan user nggak bingung, kita perlu menampilkan indikator loading dan menangani error dengan baik.

2. Cara Menampilkan Loading & Error

Kita bisa menggunakan useState untuk menyimpan status loading dan error.

Contoh dengan Fetch:

import { useEffect, useState } from "react";

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

  useEffect(() => {
    fetch("https://api.example.com/data")
      .then(response => {
        if (!response.ok) {
          throw new Error("Gagal mengambil data");
        }
        return response.json();
      })
      .then(data => {
        setData(data);
        setLoading(false);
      })
      .catch(error => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

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

  return (
    <div>
      <h1>Data dari API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

Contoh dengan Axios:

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

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

  useEffect(() => {
    axios.get("https://api.example.com/data")
      .then(response => {
        setData(response.data);
        setLoading(false);
      })
      .catch(error => {
        setError(error.message);
        setLoading(false);
      });
  }, []);

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

  return (
    <div>
      <h1>Data dari API</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}

export default App;

3. Kenapa Harus Menampilkan Loading & Error?

• Tanpa loading, user nggak tahu apakah data sedang diambil atau nggak.
• Tanpa error handling, user bisa bingung kenapa datanya nggak muncul.

4. Kesimpulan

• Gunakan loading state untuk memberi tahu user bahwa data sedang diambil.
• Tangani error agar user tahu kalau ada masalah dalam pengambilan data.
• Pakai conditional rendering untuk menampilkan loading, error, atau data.

Dengan menampilkan loading dan menangani error, user akan mendapatkan pengalaman yang lebih baik saat menggunakan aplikasi. Yuk, coba implementasikan di proyek React-mu!