Cara Mengimplementasikan Hook useFetch Di React

Hook khusus bisa membantu Anda menghindari duplikasi ini dan membuat code Anda lebih modular dan bisa digunakan kembali.

Pada artikel ini, kita akan mengeksploitasi langkah mengimplementasikan useFetch hook di React yang memakai Axios untuk mengambil data dan memberikan dukungan caching untuk menghindari keinginan jaringan yang tidak perlu. Diakhir artikel ini, Anda akan mempunyai Hook khusus yang bisa Anda pakai dalam project React Anda sendiri.

Persyaratan

Sebelum kita mulai, Anda harus telah terlatih dengan React dan hooks. Anda harus juga memasang Axios di project Anda. Bila belum, Anda bisa menginstalnya dengan menjalankan perintah berikut ini:

npm install axios

useFetch Hook

Mari kita mulai dengan membuat file baru bernama useFetch.js. Di sinilah kita akan menentukan hook kustom kita.

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

const useFetch = (url, options = {}) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(url, options);

        setData(response.data);
        setLoading(false);
      } catch (err) {
        setError(err);
        setLoading(false);
      }
    };

    const cacheData = localStorage.getItem(url);
    if (cacheData) {
      setData(JSON.parse(cacheData));
      setLoading(false);
    } else {
      fetchData();
    }
  }, [url, options]);

  useEffect(() => {
    if (data) {
      localStorage.setItem(url, JSON.stringify(data));
    }
  }, [data, url]);

  return { loading, error, data };
};

export default useFetch;

Mari kita telusuri code ini langkah demi langkah.

Pertama, kita mengimpor hook useState dan useEffect dari React, dan Axios.

Selanjutnya, kita mendeskripsikan Hook khusus kita yang disebutkan useFetch. Hook ini memerlukan dua argument: URL yang akan diambil, dan object opsional yang berisi pilihan Axios seperti header, parameter kueri, dan lain-lain.

Dalam hook useFetch, kita mendeskripsikan tiga variabel status menggunakan hook useState: loading, error, dan data. Variabel-variabel ini akan melacak status loading, error apa pun itu yang terjadi selama pengambilan, dan data yang diambil.

Setelah itu, kita mendeskripsikan sebuah efek memakai hook useEffect. Efek ini bertanggungjawab untuk mengambil data dan mengupdate variabel kondisi yang tepat. Berikut yang dilakukannya:

1	Ini mendefinisikan fungsi async yang disebut fetchData yang membuat permintaan GET Axios ke URL yang ditentukan dengan opsi yang ditentukan.
2	Jika permintaan berhasil, itu memperbarui variabel status data dengan data respons dan menyetel memuat ke false.
3	Jika terjadi error, itu memperbarui variabel status error dengan error dan menyetel memuat ke false.
4	Ini memeriksa apakah data sudah di-cache di penyimpanan lokal. Jika ya, ini menyetel variabel status data ke data yang di-cache dan menyetel loading ke false. Jika tidak, ia akan memanggil fungsi fetchData untuk mengambil data.

Hook useEffect mengambil array dependensi sebagai argument keduanya. Dalam hal ini, kami mengikutkan variabel url dan pilihan sebagai dependensi. Ini pastikan bahwa efek jalan tiap kali URL atau pilihan berbeda, yang dibutuhkan untuk mengambil data yang benar.

Terakhir, kita mendeskripsikan efek lain memakai hook useEffect. Efek ini bertanggungjawab untuk menyimpan data dalam penyimpanan lokal setiap variabel status data berubah. Berikut yang dilakukannya:

1	Ini memeriksa apakah data benar (i.e., not null, undefined, atau false). Jika ya, ia menyimpan data di penyimpanan lokal menggunakan metode `localStorage.setItem.`
2	Efeknya hanya berjalan ketika data atau variabel url berubah.

Diakhir Hook, kami mengembalikan object yang berisi faktor loading, error, dan status data. Ini memungkinkannya elemen yang memakai hook useFetch untuk terhubung status loading, error apa pun itu yang terjadi, dan data yang diambil.

Menggunakan useFetch Hook

Saat ini kita sudah mendeskripsikan kustom hook kita, mari kita lihat bagaimana memakainya dalam sebuah komponen.

Berikut contoh komponen yang memakai useFetch hook untuk mengambil data dari API:

import useFetch from './useFetch';

const MyComponent = () => {
  const { loading, error, data } = useFetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default MyComponent;

Dalam contoh ini, kami mengimpor Hook useFetch dari file useFetch.js yang kami buat awalnya. Selanjutnya kita panggil useFetch hook dengan URL yang ingin kita ambil (https://jsonplaceholder.typicode.com/posts).

Hook useFetch mengembalikan object dengan tiga variabel kondisi: loading, error, dan data. Kami menghancurkan struktur variabel ini dan memakainya untuk merender secara kondisional baik pesan loading, pesan error, atau data yang diambil.

Bila loading benar, kami merender pesan loading simpel. Bila error benar, kami membuat pesan error dengan text pesan error. Bila data benar, kami merender data yang diambil sebagai daftar tidak berurutan.

Ringkasan

Dalam artikel ini, kami sudah menelusuri cara mengaplikasikan useFetch hook di React dengan support caching memakai Axios. Hook khusus ini memungkinkan Anda mengambil data dari API dan menangani status loading, error, dan data dengan modular dan bisa dipakai kembali. Kami sudah memperlihatkan langkah memakai useFetch hook dalam komponen untuk mengambil data dan merendernya secara kondisional berdasarkan status loading dan error.

Dengan hook useFetch ini, Anda bisa secara mudah mengambil data dari API di project React Anda sekalian menjaga supaya code Anda selalu teratur dan mudah dipelihara.

Cara Mengimplementasikan Hook useFetch Di React

Menggunakan useFetch Hook

Ringkasan

Artikel TerHook Lainnya :