Perbedaan custom hook dan utils helper di react

IQBAL FARHAN SYUHADA

20 Jun 2024

Dalam pengembangan aplikasi menggunakan React, baik custom hook maupun utils helper adalah dua konsep yang sering digunakan untuk mengelola logika dan fungsionalitas. Meskipun keduanya bertujuan untuk meningkatkan keterbacaan dan pemeliharaan kode, mereka memiliki perbedaan dalam cara mereka digunakan dan diimplementasikan.

Custom Hook

Custom hook adalah fungsi JavaScript yang menggunakan hook React lainnya seperti useState, useEffect, dll., untuk membungkus logika komponen yang kompleks atau berulang sehingga dapat digunakan kembali di berbagai komponen.

Ciri-ciri Custom Hook:

1. Menggunakan Hook React: Custom hook selalu menggunakan hook React di dalamnya (misalnya useState, useEffect, useContext, dll.).
2. Nama Harus Diawali dengan "use": Untuk membedakan dengan fungsi biasa, nama custom hook harus diawali dengan kata use, misalnya useFetch, useAuth, dll.
3. Mengelola State dan Side Effects: Custom hook biasanya mengelola state dan side effects (efek samping) seperti pengambilan data (fetching), subscriptions, timers, dll.

Contoh Custom Hook:

import { useState, useEffect } from 'react';

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

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const result = await response.json();
      setData(result);
      setLoading(false);
    }

    fetchData();
  }, [url]);

  return { data, loading };
}

export default useFetch;

Utils Helper

Utils helper adalah fungsi JavaScript biasa yang tidak menggunakan hook React. Fungsinya adalah untuk melakukan tugas-tugas umum atau operasi yang dapat digunakan kembali di berbagai bagian aplikasi.

Ciri-ciri Utils Helper:

1. Tidak Menggunakan Hook React: Utils helper adalah fungsi biasa dan tidak menggunakan hook React seperti useState, useEffect, dll.
2. Fokus pada Operasi Umum: Utils helper digunakan untuk operasi umum seperti manipulasi string, format tanggal, perhitungan matematis, dll.
3. Tidak Mengelola State atau Side Effects: Biasanya, utils helper tidak mengelola state atau efek samping seperti pengambilan data atau subscriptions.

Contoh Utils Helper:

function formatCurrency(amount) {
  return `$${amount.toFixed(2)}`;
}

export default formatCurrency;

Perbandingan Utama

Dengan memahami perbedaan ini, Anda dapat memilih apakah akan menggunakan custom hook atau utils helper sesuai dengan kebutuhan spesifik Anda dalam pengembangan aplikasi React.