Custom Hooks: Pola Logika yang Dapat Digunakan Kembali di React

React Hooks merevolusi cara kita menulis komponen React dengan memperkenalkan fitur state dan lifecycle ke komponen fungsional. Di antara banyak manfaat yang ditawarkan, custom hook menonjol sebagai mekanisme yang kuat untuk mengekstrak dan menggunakan kembali logika di beberapa komponen. Postingan blog ini akan membahas secara mendalam dunia custom hook, menjelajahi manfaat, pembuatan, dan penggunaannya dengan contoh-contoh praktis.

Apa itu Custom Hooks?

Pada dasarnya, custom hook adalah fungsi JavaScript yang dimulai dengan kata "use" dan dapat memanggil hook lainnya. Mereka memungkinkan Anda untuk mengekstrak logika komponen ke dalam fungsi yang dapat digunakan kembali. Ini adalah cara yang ampuh untuk berbagi logika stateful, efek samping, atau perilaku kompleks lainnya antar komponen tanpa harus menggunakan render props, higher-order components, atau pola kompleks lainnya.

Karakteristik Utama Custom Hooks:

Konvensi Penamaan: Custom hook harus dimulai dengan kata "use". Ini memberi sinyal kepada React bahwa fungsi tersebut berisi hook dan harus mengikuti aturan hook.
Dapat Digunakan Kembali: Tujuan utamanya adalah untuk mengenkapsulasi logika yang dapat digunakan kembali, membuatnya mudah untuk berbagi fungsionalitas antar komponen.
Logika Stateful: Custom hook dapat mengelola state-nya sendiri menggunakan hook useState, yang memungkinkan mereka untuk mengenkapsulasi perilaku stateful yang kompleks.
Efek Samping: Mereka juga dapat melakukan efek samping menggunakan hook useEffect, memungkinkan integrasi dengan API eksternal, pengambilan data, dan banyak lagi.
Dapat Disusun: Custom hook dapat memanggil hook lain, memungkinkan Anda membangun logika kompleks dengan menyusun hook yang lebih kecil dan lebih terfokus.

Manfaat Menggunakan Custom Hooks

Custom hook menawarkan beberapa keuntungan signifikan dalam pengembangan React:

Ketergunaan Kembali Kode: Manfaat yang paling jelas adalah kemampuan untuk menggunakan kembali logika di beberapa komponen. Ini mengurangi duplikasi kode dan mendorong basis kode yang lebih DRY (Don't Repeat Yourself).
Keterbacaan yang Ditingkatkan: Dengan mengekstrak logika yang kompleks ke dalam custom hook terpisah, komponen Anda menjadi lebih bersih dan lebih mudah dipahami. Logika komponen inti tetap fokus pada rendering UI.
Pemeliharaan yang Ditingkatkan: Ketika logika dienkapsulasi dalam custom hook, perubahan dan perbaikan bug dapat diterapkan di satu lokasi, mengurangi risiko memasukkan kesalahan di beberapa komponen.
Dapat Diuji: Custom hook dapat dengan mudah diuji secara terpisah, memastikan bahwa logika yang dapat digunakan kembali berfungsi dengan benar secara independen dari komponen yang menggunakannya.
Komponen yang Disederhanakan: Custom hook membantu merapikan komponen, membuatnya tidak terlalu bertele-tele dan lebih fokus pada tujuan utamanya.

Membuat Custom Hook Pertama Anda

Mari kita ilustrasikan pembuatan custom hook dengan contoh praktis: sebuah hook yang melacak ukuran jendela.

Contoh: useWindowSize

Hook ini akan mengembalikan lebar dan tinggi jendela browser saat ini. Hook ini juga akan memperbarui nilai-nilai ini ketika jendela diubah ukurannya.

import { useState, useEffect } from 'react';

function useWindowSize() {
  const [windowSize, setWindowSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setWindowSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }

    window.addEventListener('resize', handleResize);

    // Hapus event listener saat cleanup
    return () => window.removeEventListener('resize', handleResize);
  }, []); // Array kosong memastikan efek hanya berjalan saat mount

  return windowSize;
}

export default useWindowSize;

Penjelasan:

Impor Hook yang Diperlukan: Kami mengimpor useState dan useEffect dari React.
Definisikan Hook: Kami membuat fungsi bernama useWindowSize, sesuai dengan konvensi penamaan.
Inisialisasi State: Kami menggunakan useState untuk menginisialisasi state windowSize dengan lebar dan tinggi awal jendela.
Siapkan Event Listener: Kami menggunakan useEffect untuk menambahkan event listener 'resize' ke jendela. Ketika jendela diubah ukurannya, fungsi handleResize akan memperbarui state windowSize.
Pembersihan (Cleanup): Kami mengembalikan fungsi pembersihan dari useEffect untuk menghapus event listener saat komponen di-unmount. Ini mencegah kebocoran memori.
Nilai Kembalian: Hook mengembalikan objek windowSize, yang berisi lebar dan tinggi jendela saat ini.

Menggunakan Custom Hook di dalam Komponen

Setelah kita membuat custom hook kita, mari kita lihat cara menggunakannya di dalam komponen React.

import React from 'react';
import useWindowSize from './useWindowSize';

function MyComponent() {
  const { width, height } = useWindowSize();

  return (
    
      Lebar jendela: {width}px
      Tinggi jendela: {height}px
    
  );
}

export default MyComponent;

Penjelasan:

Impor Hook: Kami mengimpor custom hook useWindowSize.
Panggil Hook: Kami memanggil hook useWindowSize di dalam komponen.
Akses Nilai: Kami melakukan destrukturisasi pada objek yang dikembalikan untuk mendapatkan nilai width dan height.
Render Nilai: Kami merender nilai lebar dan tinggi di UI komponen.

Komponen apa pun yang menggunakan useWindowSize akan secara otomatis diperbarui ketika ukuran jendela berubah.

Contoh yang Lebih Kompleks

Mari kita jelajahi beberapa kasus penggunaan yang lebih canggih untuk custom hook.

Contoh: useLocalStorage

Hook ini memungkinkan Anda untuk dengan mudah menyimpan dan mengambil data dari local storage.

import { useState, useEffect } from 'react';

function useLocalStorage(key, initialValue) {
  // State untuk menyimpan nilai kita
  // Berikan nilai awal ke useState agar logika hanya dieksekusi sekali
  const [storedValue, setStoredValue] = useState(() => {
    try {
      // Ambil dari local storage berdasarkan kunci
      const item = window.localStorage.getItem(key);
      // Parse JSON yang tersimpan atau jika tidak ada kembalikan initialValue
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      // Jika terjadi kesalahan, kembalikan juga initialValue
      console.log(error);
      return initialValue;
    }
  });

  // Kembalikan versi terbungkus dari fungsi setter useState yang ...
  // ... menyimpan nilai baru ke localStorage.
  const setValue = (value) => {
    try {
      // Izinkan nilai menjadi fungsi agar kita memiliki API yang sama seperti useState
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      // Simpan ke local storage
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
      // Simpan state
      setStoredValue(valueToStore);
    } catch (error) {
      // Implementasi yang lebih canggih akan menangani kasus kesalahan
      console.log(error);
    }
  };

  useEffect(() => {
    try {
      const item = window.localStorage.getItem(key);
      setStoredValue(item ? JSON.parse(item) : initialValue);
    } catch (error) {
      console.log(error);
    }
  }, [key, initialValue]);

  return [storedValue, setValue];
}

export default useLocalStorage;

Penggunaan:

import React from 'react';
import useLocalStorage from './useLocalStorage';

function MyComponent() {
  const [name, setName] = useLocalStorage('name', 'Tamu');

  return (
    
      Halo, {name}!
       setName(e.target.value)}
      />
    
  );
}

export default MyComponent;

Contoh: useFetch

Hook ini mengenkapsulasi logika untuk mengambil data dari sebuah API.

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`Kesalahan HTTP! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (error) {
        setError(error);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Penggunaan:

import React from 'react';
import useFetch from './useFetch';

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

  if (loading) return Memuat...;
  if (error) return Kesalahan: {error.message};

  return (
    
      Judul: {data.title}
      Selesai: {data.completed ? 'Ya' : 'Tidak'}
    
  );
}

export default MyComponent;

Praktik Terbaik untuk Custom Hooks

Untuk memastikan custom hook Anda efektif dan mudah dikelola, ikuti praktik terbaik berikut:

Jaga Agar Tetap Terfokus: Setiap custom hook harus memiliki satu tujuan yang terdefinisi dengan baik. Hindari membuat hook yang terlalu kompleks yang mencoba melakukan terlalu banyak hal.
Dokumentasikan Hook Anda: Berikan dokumentasi yang jelas dan ringkas untuk setiap custom hook, menjelaskan tujuan, masukan, dan keluarannya.
Uji Hook Anda: Tulis unit test untuk custom hook Anda untuk memastikan bahwa mereka berfungsi dengan benar dan andal.
Gunakan Nama yang Deskriptif: Pilih nama yang deskriptif untuk custom hook Anda yang dengan jelas menunjukkan tujuannya.
Tangani Kesalahan dengan Baik: Terapkan penanganan kesalahan di dalam custom hook Anda untuk mencegah perilaku tak terduga dan memberikan pesan kesalahan yang informatif.
Pertimbangkan Ketergunaan Kembali: Rancang custom hook Anda dengan mempertimbangkan ketergunaan kembali. Buatlah cukup generik untuk dapat digunakan di beberapa komponen.
Hindari Abstraksi Berlebihan: Jangan membuat custom hook untuk logika sederhana yang dapat dengan mudah ditangani di dalam komponen. Hanya ekstrak logika yang benar-benar dapat digunakan kembali dan kompleks.

Kesalahan Umum yang Harus Dihindari

Melanggar Aturan Hook: Selalu panggil hook di tingkat atas fungsi custom hook Anda dan hanya panggil mereka dari komponen fungsi React atau custom hook lainnya.
Mengabaikan Dependensi di useEffect: Pastikan untuk menyertakan semua dependensi yang diperlukan dalam array dependensi hook useEffect untuk mencegah stale closure dan perilaku tak terduga.
Membuat Perulangan Tak Terbatas (Infinite Loop): Berhati-hatilah saat memperbarui state di dalam hook useEffect, karena ini dapat dengan mudah menyebabkan perulangan tak terbatas. Pastikan pembaruan bersifat kondisional dan berdasarkan perubahan dependensi.
Lupa Melakukan Cleanup: Selalu sertakan fungsi cleanup di useEffect untuk menghapus event listener, membatalkan langganan, dan melakukan tugas pembersihan lainnya untuk mencegah kebocoran memori.

Pola Tingkat Lanjut

Menyusun Custom Hooks

Custom hook dapat disusun bersama untuk menciptakan logika yang lebih kompleks. Misalnya, Anda bisa menggabungkan hook useLocalStorage dengan hook useFetch untuk secara otomatis menyimpan data yang diambil ke local storage.

Berbagi Logika Antar Hook

Jika beberapa custom hook berbagi logika yang sama, Anda dapat mengekstrak logika tersebut ke dalam fungsi utilitas terpisah dan menggunakannya kembali di kedua hook.

Menggunakan Context dengan Custom Hooks

Custom hook dapat digunakan bersama dengan React Context untuk mengakses dan memperbarui state global. Ini memungkinkan Anda untuk membuat komponen yang dapat digunakan kembali yang sadar dan dapat berinteraksi dengan state global aplikasi.

Contoh di Dunia Nyata

Berikut adalah beberapa contoh bagaimana custom hook dapat digunakan dalam aplikasi dunia nyata:

Validasi Formulir: Buat hook useForm untuk menangani state formulir, validasi, dan pengiriman.
Autentikasi: Terapkan hook useAuth untuk mengelola autentikasi dan otorisasi pengguna.
Manajemen Tema: Kembangkan hook useTheme untuk beralih antara tema yang berbeda (terang, gelap, dll.).
Geolokasi: Bangun hook useGeolocation untuk melacak lokasi pengguna saat ini.
Deteksi Gulir (Scroll): Buat hook useScroll untuk mendeteksi ketika pengguna telah menggulir ke titik tertentu pada halaman.

Contoh: hook useGeolocation untuk aplikasi lintas budaya seperti pemetaan atau layanan pengiriman

import { useState, useEffect } from 'react';

function useGeolocation() {
  const [location, setLocation] = useState({
    latitude: null,
    longitude: null,
    error: null,
  });

  useEffect(() => {
    if (!navigator.geolocation) {
      setLocation({
        latitude: null,
        longitude: null,
        error: 'Geolokasi tidak didukung oleh browser ini.',
      });
      return;
    }

    const watchId = navigator.geolocation.watchPosition(
      (position) => {
        setLocation({
          latitude: position.coords.latitude,
          longitude: position.coords.longitude,
          error: null,
        });
      },
      (error) => {
        setLocation({
          latitude: null,
          longitude: null,
          error: error.message,
        });
      }
    );

    return () => navigator.geolocation.clearWatch(watchId);
  }, []);

  return location;
}

export default useGeolocation;

Kesimpulan

Custom hook adalah alat yang ampuh untuk menulis kode React yang lebih bersih, lebih dapat digunakan kembali, dan lebih mudah dikelola. Dengan mengenkapsulasi logika kompleks dalam custom hook, Anda dapat menyederhanakan komponen Anda, mengurangi duplikasi kode, dan meningkatkan struktur keseluruhan aplikasi Anda. Manfaatkan custom hook dan buka potensinya untuk membangun aplikasi React yang lebih kuat dan skalabel.

Mulailah dengan mengidentifikasi area di basis kode Anda yang ada di mana logika diulang di beberapa komponen. Kemudian, refactor logika tersebut menjadi custom hook. Seiring waktu, Anda akan membangun perpustakaan hook yang dapat digunakan kembali yang akan mempercepat proses pengembangan Anda dan meningkatkan kualitas kode Anda.

Ingatlah untuk mengikuti praktik terbaik, menghindari kesalahan umum, dan menjelajahi pola-pola canggih untuk mendapatkan hasil maksimal dari custom hook. Dengan latihan dan pengalaman, Anda akan menjadi ahli dalam custom hook dan pengembang React yang lebih efektif.