Dependensi Hook Kustom React: Menguasai Optimisasi Efek untuk Performa

Hook kustom React adalah alat yang ampuh untuk mengabstraksi dan menggunakan kembali logika di seluruh komponen Anda. Namun, penanganan dependensi yang salah dalam `useEffect` dapat menyebabkan masalah performa, render ulang yang tidak perlu, dan bahkan perulangan tak terbatas. Panduan ini memberikan pemahaman komprehensif tentang dependensi `useEffect` dan praktik terbaik untuk mengoptimalkan hook kustom Anda.

Memahami useEffect dan Dependensi

Hook `useEffect` di React memungkinkan Anda untuk melakukan efek samping (side effects) di komponen Anda, seperti pengambilan data, manipulasi DOM, atau menyiapkan langganan (subscriptions). Argumen kedua untuk `useEffect` adalah larik dependensi opsional. Larik ini memberi tahu React kapan efek harus dijalankan kembali. Jika salah satu nilai dalam larik dependensi berubah di antara render, efek akan dieksekusi ulang. Jika larik dependensi kosong (`[]`), efek hanya akan berjalan sekali setelah render awal. Jika larik dependensi dihilangkan sama sekali, efek akan berjalan setelah setiap render.

Mengapa Dependensi Penting

Dependensi sangat penting untuk mengontrol kapan efek Anda berjalan. Jika Anda menyertakan dependensi yang sebenarnya tidak perlu memicu efek, Anda akan berakhir dengan eksekusi ulang yang tidak perlu, yang berpotensi memengaruhi performa. Sebaliknya, jika Anda menghilangkan dependensi yang *memang* perlu memicu efek, komponen Anda mungkin tidak diperbarui dengan benar, yang menyebabkan bug dan perilaku tak terduga. Mari kita lihat contoh dasar:

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

function ExampleComponent({ userId }) {
  const [userData, setUserData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(`https://api.example.com/users/${userId}`);
      const data = await response.json();
      setUserData(data);
    }

    fetchData();
  }, [userId]); // Larik dependensi: hanya berjalan ulang saat userId berubah

  if (!userData) {
    return 
Memuat...
;
  }

  return (
    

      
{userData.name}
      
{userData.email}
    
  );
}

export default ExampleComponent;

            

              
                Copy
              
            
          

Dalam contoh ini, efek mengambil data pengguna dari API. Larik dependensi mencakup `userId`. Ini memastikan bahwa efek hanya berjalan ketika prop `userId` berubah. Jika `userId` tetap sama, efek tidak akan berjalan ulang, mencegah panggilan API yang tidak perlu.

Kesalahan Umum dan Cara Menghindarinya

Beberapa kesalahan umum dapat muncul saat bekerja dengan dependensi `useEffect`. Memahami kesalahan ini dan cara menghindarinya sangat penting untuk menulis kode React yang efisien dan bebas bug.

1. Ketergantungan yang Hilang

Kesalahan paling umum adalah menghilangkan dependensi yang *seharusnya* disertakan dalam larik dependensi. Hal ini dapat menyebabkan penutupan basi (stale closures) dan perilaku yang tidak terduga. Sebagai contoh:

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(count + 1); // Potensi masalah: `count` bukan dependensi
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Larik dependensi kosong: efek hanya berjalan sekali

  return 
Hitungan: {count}
;
}

export default Counter;

            

              
                Copy
              
            
          

Dalam contoh ini, variabel `count` tidak termasuk dalam larik dependensi. Akibatnya, callback `setInterval` selalu menggunakan nilai awal `count` (yaitu 0). Penghitung tidak akan bertambah dengan benar. Versi yang benar seharusnya menyertakan `count` dalam larik dependensi:

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

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(prevCount => prevCount + 1); // Benar: gunakan pembaruan fungsional
    }, 1000);

    return () => clearInterval(intervalId);
  }, []); // Sekarang tidak ada dependensi yang diperlukan karena kita menggunakan bentuk pembaruan fungsional.

  return 
Hitungan: {count}
;
}

export default Counter;

            

              
                Copy
              
            
          

Pelajaran yang Didapat: Selalu pastikan bahwa semua variabel yang digunakan di dalam efek yang didefinisikan di luar lingkup efek disertakan dalam larik dependensi. Jika memungkinkan, gunakan pembaruan fungsional (`setCount(prevCount => prevCount + 1)`) untuk menghindari kebutuhan akan dependensi `count`.

2. Menyertakan Dependensi yang Tidak Perlu

Menyertakan dependensi yang tidak perlu dapat menyebabkan render ulang yang berlebihan dan penurunan performa. Misalnya, pertimbangkan komponen yang menerima prop yang merupakan objek:

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

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Lakukan beberapa pemrosesan data yang kompleks
    const result = processData(data);
    setProcessedData(result);
  }, [data]); // Masalah: `data` adalah objek, jadi ia berubah pada setiap render

  function processData(data) {
    // Logika pemrosesan data yang kompleks
    return data;
  }

  if (!processedData) {
    return 
Memuat...
;
  }

  return 
{processedData.value}
;
}

export default DisplayData;

            

              
                Copy
              
            
          

Dalam kasus ini, bahkan jika konten objek `data` tetap sama secara logis, objek baru dibuat pada setiap render dari komponen induk. Ini berarti `useEffect` akan berjalan ulang pada setiap render, bahkan jika pemrosesan data sebenarnya tidak perlu dilakukan ulang. Berikut adalah beberapa strategi untuk menyelesaikannya:

Solusi 1: Memoization dengan `useMemo`

Gunakan `useMemo` untuk melakukan memoize pada prop `data`. Ini hanya akan membuat ulang objek `data` jika properti yang relevan berubah.

            
import React, { useState, useEffect, useMemo } from 'react';

function ParentComponent() {
  const [value, setValue] = useState(0);

  // Lakukan memoize pada objek `data`
  const data = useMemo(() => ({ value }), [value]);

  return ;
}

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Lakukan beberapa pemrosesan data yang kompleks
    const result = processData(data);
    setProcessedData(result);
  }, [data]); // Sekarang `data` hanya berubah saat `value` berubah

  function processData(data) {
    // Logika pemrosesan data yang kompleks
    return data;
  }

  if (!processedData) {
    return 
Memuat...
;
  }

  return 
{processedData.value}
;
}

export default ParentComponent;

            

              
                Copy
              
            
          

Solusi 2: Destrukturisasi Prop

Berikan properti individual dari objek `data` sebagai prop alih-alih seluruh objek. Ini memungkinkan `useEffect` untuk hanya berjalan ulang ketika properti spesifik yang menjadi dependensinya berubah.

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

function ParentComponent() {
  const [value, setValue] = useState(0);

  return ; // Berikan `value` secara langsung
}

function DisplayData({ value }) {
  const [processedData, setProcessedData] = useState(null);

  useEffect(() => {
    // Lakukan beberapa pemrosesan data yang kompleks
    const result = processData(value);
    setProcessedData(result);
  }, [value]); // Hanya berjalan ulang saat `value` berubah

  function processData(value) {
    // Logika pemrosesan data yang kompleks
    return { value }; // Bungkus dalam objek jika diperlukan di dalam DisplayData
  }

  if (!processedData) {
    return 
Memuat...
;
  }

  return 
{processedData.value}
;
}

export default ParentComponent;

            

              
                Copy
              
            
          

Solusi 3: Menggunakan `useRef` untuk Membandingkan Nilai

Jika Anda perlu membandingkan *konten* dari objek `data` dan hanya menjalankan ulang efek ketika konten berubah, Anda dapat menggunakan `useRef` untuk menyimpan nilai sebelumnya dari `data` dan melakukan perbandingan mendalam (deep comparison).

            
import React, { useState, useEffect, useRef } from 'react';
import { isEqual } from 'lodash'; // Memerlukan pustaka lodash (npm install lodash)

function DisplayData({ data }) {
  const [processedData, setProcessedData] = useState(null);
  const previousData = useRef(data);

  useEffect(() => {
    if (!isEqual(data, previousData.current)) {
      // Lakukan beberapa pemrosesan data yang kompleks
      const result = processData(data);
      setProcessedData(result);
      previousData.current = data;
    }
  }, [data]); // `data` masih ada di larik dependensi, tetapi kita memeriksa kesetaraan mendalam

  function processData(data) {
    // Logika pemrosesan data yang kompleks
    return data;
  }

  if (!processedData) {
    return 
Memuat...
;
  }

  return 
{processedData.value}
;
}

export default DisplayData;

            

              
                Copy
              
            
          

Catatan: Perbandingan mendalam bisa mahal, jadi gunakan pendekatan ini dengan bijaksana. Selain itu, contoh ini bergantung pada pustaka `lodash`. Anda dapat menginstalnya menggunakan `npm install lodash` atau `yarn add lodash`.

Pelajaran yang Didapat: Pertimbangkan dengan cermat dependensi mana yang benar-benar diperlukan. Hindari menyertakan objek atau larik yang dibuat ulang pada setiap render jika kontennya tetap sama secara logis. Gunakan teknik memoization, destrukturisasi, atau perbandingan mendalam untuk mengoptimalkan performa.

3. Perulangan Tak Terbatas (Infinite Loops)

Pengelolaan dependensi yang salah dapat menyebabkan perulangan tak terbatas, di mana hook `useEffect` terus berjalan ulang, menyebabkan komponen Anda membeku atau macet. Ini sering terjadi ketika efek memperbarui variabel state yang juga merupakan dependensi dari efek tersebut. Sebagai contoh:

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

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Ambil data dari API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result); // Memperbarui state `data`
      });
  }, [data]); // Masalah: `data` adalah dependensi, jadi efeknya berjalan ulang saat `data` berubah

  if (!data) {
    return 
Memuat...
;
  }

  return 
{data.value}
;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

Dalam contoh ini, efek mengambil data dan mengaturnya ke variabel state `data`. Namun, `data` juga merupakan dependensi dari efek tersebut. Ini berarti bahwa setiap kali `data` diperbarui, efek berjalan ulang, mengambil data lagi dan mengatur `data` lagi, yang mengarah ke perulangan tak terbatas. Ada beberapa cara untuk mengatasi ini:

Solusi 1: Larik Dependensi Kosong (Hanya Muat Awal)

Jika Anda hanya ingin mengambil data sekali saat komponen dipasang (mount), Anda dapat menggunakan larik dependensi kosong:

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

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // Ambil data dari API
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(result => {
        setData(result);
      });
  }, []); // Larik dependensi kosong: efek hanya berjalan sekali

  if (!data) {
    return 
Memuat...
;
  }

  return 
{data.value}
;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

Solusi 2: Gunakan State Terpisah untuk Pemuatan

Gunakan variabel state terpisah untuk melacak apakah data telah dimuat. Ini mencegah efek berjalan ulang ketika state `data` berubah.

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

function InfiniteLoop() {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    if (isLoading) {
      // Ambil data dari API
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(result => {
          setData(result);
          setIsLoading(false);
        });
    }
  }, [isLoading]); // Hanya berjalan ulang saat `isLoading` berubah

  if (!data) {
    return 
Memuat...
;
  }

  return 
{data.value}
;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

Solusi 3: Pengambilan Data Bersyarat

Ambil data hanya jika saat ini null. Ini mencegah pengambilan berikutnya setelah data awal dimuat.

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

function InfiniteLoop() {
  const [data, setData] = useState(null);

  useEffect(() => {
    if (!data) {
      // Ambil data dari API
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(result => {
          setData(result);
        });
    }
  }, [data]); // `data` tetap menjadi dependensi tetapi efeknya bersyarat

  if (!data) {
    return 
Memuat...
;
  }

  return 
{data.value}
;
}

export default InfiniteLoop;

            

              
                Copy
              
            
          

Pelajaran yang Didapat: Berhati-hatilah saat memperbarui variabel state yang juga merupakan dependensi dari efek tersebut. Gunakan larik dependensi kosong, state pemuatan terpisah, atau logika bersyarat untuk mencegah perulangan tak terbatas.

4. Objek dan Larik yang Dapat Diubah (Mutable)

Saat bekerja dengan objek atau larik yang dapat diubah (mutable) sebagai dependensi, perubahan pada properti objek atau elemen larik tidak akan secara otomatis memicu efek. Ini karena React melakukan perbandingan dangkal (shallow comparison) dari dependensi.

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

function MutableObject() {
  const [config, setConfig] = useState({ theme: 'light', language: 'en' });

  useEffect(() => {
    console.log('Konfigurasi berubah:', config);
  }, [config]); // Masalah: Perubahan pada `config.theme` atau `config.language` tidak akan memicu efek

  const toggleTheme = () => {
    // Mengubah objek secara langsung (mutating)
    config.theme = config.theme === 'light' ? 'dark' : 'light';
    setConfig(config); // Ini tidak akan memicu render ulang atau efeknya
  };

  return (
    

      
Tema: {config.theme}, Bahasa: {config.language}
      Ganti Tema
    
  );
}

export default MutableObject;

            

              
                Copy
              
            
          

Dalam contoh ini, fungsi `toggleTheme` secara langsung memodifikasi objek `config`, yang merupakan praktik yang buruk. Perbandingan dangkal React melihat bahwa `config` masih merupakan objek yang *sama* di memori, meskipun propertinya telah berubah. Untuk memperbaikinya, Anda perlu membuat objek *baru* saat memperbarui state:

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

function MutableObject() {
  const [config, setConfig] = useState({ theme: 'light', language: 'en' });

  useEffect(() => {
    console.log('Konfigurasi berubah:', config);
  }, [config]); // Sekarang efek akan terpicu saat `config` berubah

  const toggleTheme = () => {
    setConfig({ ...config, theme: config.theme === 'light' ? 'dark' : 'light' }); // Buat objek baru
  };

  return (
    

      
Tema: {config.theme}, Bahasa: {config.language}
      Ganti Tema
    
  );
}

export default MutableObject;

            

              
                Copy
              
            
          

Dengan menggunakan operator spread (`...config`), kita membuat objek baru dengan properti `theme` yang diperbarui. Ini memicu render ulang dan efek dieksekusi ulang.

Pelajaran yang Didapat: Selalu perlakukan variabel state sebagai tidak dapat diubah (immutable). Saat memperbarui objek atau larik, buat instance baru alih-alih memodifikasi yang sudah ada. Gunakan operator spread (`...`), `Array.map()`, `Array.filter()`, atau teknik serupa untuk membuat salinan baru.

Mengoptimalkan Hook Kustom dengan Dependensi

Sekarang kita memahami kesalahan umum, mari kita lihat bagaimana mengoptimalkan hook kustom dengan mengelola dependensi secara hati-hati.

1. Memoizing Fungsi dengan `useCallback`

Jika hook kustom Anda mengembalikan fungsi yang digunakan sebagai dependensi di `useEffect` lain, Anda harus melakukan memoize fungsi tersebut menggunakan `useCallback`. Ini mencegah fungsi dibuat ulang pada setiap render, yang akan memicu efek secara tidak perlu.

            
import React, { useState, useEffect, useCallback } from 'react';

function useFetchData(url) {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState(null);

  const fetchData = useCallback(async () => {
    setIsLoading(true);
    try {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
    } catch (err) {
      setError(err);
    } finally {
      setIsLoading(false);
    }
  }, [url]); // Lakukan memoize pada `fetchData` berdasarkan `url`

  useEffect(() => {
    fetchData();
  }, [fetchData]); // Sekarang `fetchData` hanya berubah saat `url` berubah

  return { data, isLoading, error };
}

function MyComponent() {
  const [userId, setUserId] = useState(1);
  const { data, isLoading, error } = useFetchData(`https://api.example.com/users/${userId}`);

  return (
    

      {/* ... */}
    
  );
}

export default MyComponent;

            

              
                Copy
              
            
          

Dalam contoh ini, fungsi `fetchData` di-memoize menggunakan `useCallback`. Larik dependensi mencakup `url`, yang merupakan satu-satunya variabel yang memengaruhi perilaku fungsi. Ini memastikan bahwa `fetchData` hanya berubah ketika `url` berubah. Oleh karena itu, hook `useEffect` di `useFetchData` hanya akan berjalan ulang ketika `url` berubah.

2. Menggunakan `useRef` untuk Referensi Stabil

Terkadang, Anda perlu mengakses nilai terbaru dari prop atau state di dalam efek, tetapi Anda tidak ingin efek tersebut berjalan ulang saat nilai itu berubah. Dalam kasus ini, Anda dapat menggunakan `useRef` untuk membuat referensi yang stabil ke nilai tersebut.

            
import React, { useState, useEffect, useRef } from 'react';

function LogLatestValue({ value }) {
  const latestValue = useRef(value);

  useEffect(() => {
    latestValue.current = value; // Perbarui ref pada setiap render
  }, [value]); // Perbarui ref saat `value` berubah

  useEffect(() => {
    // Catat nilai terbaru setelah 5 detik
    const timerId = setTimeout(() => {
      console.log('Nilai terbaru:', latestValue.current); // Akses nilai terbaru dari ref
    }, 5000);

    return () => clearTimeout(timerId);
  }, []); // Efek hanya berjalan sekali saat mount

  return 
Nilai: {value}
;
}

export default LogLatestValue;

            

              
                Copy
              
            
          

Dalam contoh ini, ref `latestValue` diperbarui pada setiap render dengan nilai saat ini dari prop `value`. Namun, efek yang mencatat nilai hanya berjalan sekali saat pemasangan (mount), berkat larik dependensi yang kosong. Di dalam efek, kita mengakses nilai terbaru menggunakan `latestValue.current`. Ini memungkinkan kita untuk mengakses nilai `value` yang paling mutakhir tanpa menyebabkan efek berjalan ulang setiap kali `value` berubah.

3. Membuat Abstraksi Kustom

Buat pembanding (comparator) atau abstraksi kustom jika Anda bekerja dengan objek, dan hanya sebagian kecil dari propertinya yang penting untuk pemanggilan `useEffect`.

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

// Pembanding kustom untuk hanya melacak perubahan tema.
function useTheme(config) {
    const [theme, setTheme] = useState(config.theme);

    useEffect(() => {
        setTheme(config.theme);
    }, [config.theme]);

    return theme;
}

function ConfigComponent({ config }) {
    const theme = useTheme(config);

    return (
        
Tema saat ini adalah {theme}
    )
}

export default ConfigComponent;

            

              
                Copy
              
            
          

Pelajaran yang Didapat: Gunakan `useCallback` untuk melakukan memoize fungsi yang digunakan sebagai dependensi. Gunakan `useRef` untuk membuat referensi stabil ke nilai yang perlu Anda akses di dalam efek tanpa menyebabkan efek berjalan ulang. Saat berhadapan dengan objek atau larik yang kompleks, pertimbangkan untuk membuat pembanding kustom atau lapisan abstraksi untuk hanya memicu efek ketika properti yang relevan berubah.

Pertimbangan Global

Saat mengembangkan aplikasi React untuk audiens global, penting untuk mempertimbangkan bagaimana dependensi dapat memengaruhi lokalisasi dan internasionalisasi. Berikut adalah beberapa pertimbangan utama:

1. Perubahan Lokal (Locale)

Jika komponen Anda bergantung pada lokal pengguna (misalnya, untuk memformat tanggal, angka, atau mata uang), Anda harus menyertakan lokal dalam larik dependensi. Ini memastikan bahwa efek berjalan ulang ketika lokal berubah, memperbarui komponen dengan format yang benar.

            
import React, { useState, useEffect } from 'react';
import { format } from 'date-fns'; // Memerlukan pustaka date-fns (npm install date-fns)

function LocalizedDate({ date, locale }) {
  const [formattedDate, setFormattedDate] = useState('');

  useEffect(() => {
    setFormattedDate(format(date, 'PPPP', { locale }));
  }, [date, locale]); // Berjalan ulang saat `date` atau `locale` berubah

  return 
{formattedDate}
;
}

export default LocalizedDate;

            

              
                Copy
              
            
          

Dalam contoh ini, fungsi `format` dari pustaka `date-fns` digunakan untuk memformat tanggal sesuai dengan lokal yang ditentukan. `locale` disertakan dalam larik dependensi, sehingga efek berjalan ulang ketika lokal berubah, memperbarui tanggal yang diformat.

2. Pertimbangan Zona Waktu

Saat bekerja dengan tanggal dan waktu, perhatikan zona waktu. Jika komponen Anda menampilkan tanggal atau waktu dalam zona waktu lokal pengguna, Anda mungkin perlu menyertakan zona waktu dalam larik dependensi. Namun, perubahan zona waktu lebih jarang terjadi daripada perubahan lokal, jadi Anda mungkin mempertimbangkan untuk menggunakan mekanisme terpisah untuk memperbarui zona waktu, seperti konteks global.

3. Pemformatan Mata Uang

Saat memformat mata uang, gunakan kode mata uang dan lokal yang benar. Sertakan keduanya dalam larik dependensi untuk memastikan bahwa mata uang diformat dengan benar untuk wilayah pengguna.

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

function LocalizedCurrency({ amount, currency, locale }) {
  const [formattedCurrency, setFormattedCurrency] = useState('');

  useEffect(() => {
    setFormattedCurrency(new Intl.NumberFormat(locale, { style: 'currency', currency }).format(amount));
  }, [amount, currency, locale]); // Berjalan ulang saat `amount`, `currency`, atau `locale` berubah

  return 
{formattedCurrency}
;
}

export default LocalizedCurrency;

            

              
                Copy
              
            
          

Pelajaran yang Didapat: Saat mengembangkan untuk audiens global, selalu pertimbangkan bagaimana dependensi dapat memengaruhi lokalisasi dan internasionalisasi. Sertakan lokal, zona waktu, dan kode mata uang dalam larik dependensi bila perlu untuk memastikan bahwa komponen Anda menampilkan data dengan benar bagi pengguna di berbagai wilayah.

Kesimpulan

Menguasai dependensi `useEffect` sangat penting untuk menulis hook kustom React yang efisien, bebas bug, dan berperforma tinggi. Dengan memahami kesalahan umum dan menerapkan teknik optimisasi yang dibahas dalam panduan ini, Anda dapat membuat hook kustom yang dapat digunakan kembali dan mudah dipelihara. Ingatlah untuk mempertimbangkan dengan cermat dependensi mana yang benar-benar diperlukan, gunakan memoization dan referensi stabil jika sesuai, dan perhatikan pertimbangan global seperti lokalisasi dan internasionalisasi. Dengan mengikuti praktik terbaik ini, Anda dapat membuka potensi penuh dari hook kustom React dan membangun aplikasi berkualitas tinggi untuk audiens global.

Panduan komprehensif ini telah membahas banyak hal. Sebagai rekap, berikut adalah poin-poin pentingnya:

• Pahami tujuan dependensi: Mereka mengontrol kapan efek Anda berjalan.
• Hindari dependensi yang hilang: Pastikan semua variabel yang digunakan di dalam efek disertakan.
• Hilangkan dependensi yang tidak perlu: Gunakan memoization, destrukturisasi, atau perbandingan mendalam.
• Cegah perulangan tak terbatas: Hati-hati saat memperbarui variabel state yang juga merupakan dependensi.
• Perlakukan state sebagai immutable: Buat objek atau larik baru saat memperbarui.
• Memoize fungsi dengan `useCallback`: Cegah render ulang yang tidak perlu.
• Gunakan `useRef` untuk referensi stabil: Akses nilai terbaru tanpa memicu render ulang.
• Pertimbangkan implikasi global: Perhitungkan perubahan lokal, zona waktu, dan mata uang.

Dengan menerapkan prinsip-prinsip ini, Anda dapat menulis hook kustom React yang lebih kuat dan efisien yang akan meningkatkan kinerja dan pemeliharaan aplikasi Anda.