Berbagai Cara Pengambilan Data di React JS

Sebagai seorang developer React, kemampuan untuk mengambil data dari API adalah keterampilan yang sangat penting. Dalam pengembangan aplikasi web modern, pengambilan data merupakan bagian inti yang mempengaruhi performa dan pengalaman pengguna. Pada artikel ini, kita akan membahas berbagai metode untuk mengambil data secara efisien di project React.js Kamu.

1. Menggunakan Metode Fetch

Metode fetch() adalah cara dasar dalam JavaScript untuk melakukan permintaan ke server dan memuat informasi ke dalam halaman web. Kamu dapat menggunakan metode ini untuk mengambil data dari API yang mengembalikan data dalam format JSON atau XML. Metode ini mengembalikan sebuah promise, sehingga kamu bisa menangani hasilnya dengan .then() dan menangani kesalahan dengan .catch().

Contoh:

function App() {
  useEffect(() => {
    fetch('https://site.com/')
      .then(response => response.json())
      .then(json => console.log(json))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>Berbagai cara pengambilan data</div>
  );
}

Pada contoh di atas, fetch() digunakan di dalam useEffect untuk memastikan data hanya diambil sekali saat komponen pertama kali dimuat.

2. Async-Await

Metode async-await adalah cara yang lebih modern dan disarankan untuk mengambil data dari API. Ini memungkinkan kita untuk menghapus penggunaan .then() dan menulis kode yang lebih mudah dibaca dan dikelola. Di dalam blok async, kita bisa menggunakan fungsi await untuk menunggu sebuah promise hingga selesai.

Contoh:

function App() {
  useEffect(() => {
    (async () => {
      try {
        const result = await fetch('https://site.com/');
        const data = await result.json();
        console.log(data);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    })();
  }, []);

  return (
    <div>Berbagai cara pengambilan data</div>
  );
}

Dalam contoh ini, blok kode asinkron membuat pengambilan data lebih efisien dan penanganan kesalahan menjadi lebih sederhana.

3. Menggunakan Library Axios

Axios adalah library populer yang memudahkan untuk mengirim permintaan HTTP secara asinkron ke API REST. Dengan Axios, kita dapat dengan mudah melakukan operasi create, read, update, dan delete (CRUD). Axios dapat diimpor ke dalam proyek React dan digunakan dengan mudah.

Contoh:

import axios from 'axios';

function App() {
  useEffect(() => {
    axios.get('https://site.com/')
      .then(response => console.log(response.data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>Berbagai cara pengambilan data</div>
  );
}

Contoh di atas menunjukkan penggunaan Axios untuk mengambil data dan menampilkan hasilnya ke konsol.

4. Membuat Custom Hook

Custom Hook adalah komponen React yang namanya dimulai dengan “use”, seperti useFetch. Hook ini bisa menggunakan satu atau lebih hook React di dalamnya, dan sangat berguna untuk mengabstraksi logika pengambilan data sehingga dapat digunakan kembali di berbagai komponen.

Contoh:

const useFetch = (url) => {
  const [isLoading, setIsLoading] = useState(false);
  const [apiData, setApiData] = useState(null);
  const [serverError, setServerError] = useState(null);

  useEffect(() => {
    setIsLoading(true);
    const fetchData = async () => {
      try {
        const resp = await axios.get(url);
        setApiData(resp.data);
      } catch (error) {
        setServerError(error);
      } finally {
        setIsLoading(false);
      }
    };
    fetchData();
  }, [url]);

  return { isLoading, apiData, serverError };
};

5. Penggunaan di Komponen

Setelah membuat custom hook seperti useFetch, kamu dapat mengimpornya ke dalam komponen dan menggunakan hook ini untuk mengambil data dari API.

Contoh:

import useFetch from './useFetch';

const App = () => {
  const { isLoading, serverError, apiData } = useFetch('https://site.com');

  return (
    <div>
      <h2>Data API</h2>
      {isLoading && <span>Loading ...</span>}
      {!isLoading && serverError ? (
        <span>Error in fetching data ...</span>
      ) : (
        <span>{JSON.stringify(apiData)}</span>
      )}
    </div>
  );
}

6. Menggunakan React Query Library

React Query adalah library yang memungkinkan kamu melakukan lebih dari sekadar pengambilan data. Library ini menyediakan dukungan untuk caching dan refetching, yang dapat meningkatkan pengalaman pengguna secara keseluruhan dengan mencegah ketidakteraturan dan memastikan aplikasi terasa lebih cepat.

Contoh:

import axios from 'axios';
import { useQuery } from 'react-query';

function App() {
  const { isLoading, error, data } = useQuery('post', () => axios.get('https://site.com'));

  return (
    <div>Berbagai cara pengambilan data</div>
  );
}

Dengan menggunakan React Query, kita dapat mengelola status permintaan API dengan lebih baik dan mengoptimalkan kinerja aplikasi.

Baca juga: Top 50 React Interview Questions

Kesimpulan

Ada banyak cara untuk mengambil data di React JS, dan masing-masing metode memiliki keunggulan tersendiri. Kamu bisa memilih metode yang paling sesuai dengan kebutuhan proyek dan preferensi kamu. Apakah kamu memilih menggunakan fetch(), async-await, Axios, custom hook, atau React Query, penting untuk memahami cara kerja setiap metode dan kapan menggunakannya. Dengan memahami berbagai cara pengambilan data ini, kamu bisa meningkatkan kualitas aplikasi React kamu dan memberikan pengalaman pengguna yang lebih baik.