Apa itu Custom Hooks dalam React?

Custom Hooks adalah fungsi JavaScript yang memanfaatkan hooks bawaan dari React (useState, useEffect, dll.) untuk mengenkapsulasi dan menggunakan kembali logika stateful. Custom Hooks memungkinkan Anda mengekstrak logika dari komponen dan membaginya di antara beberapa komponen.

Custom Hooks memberikan cara yang lebih modular dan bersih untuk menangani logika yang kompleks atau berulang.

Contoh Custom Hook

Berikut adalah contoh sederhana custom hook untuk menangani logika penghitungan dalam komponen fungsional.

Membuat Custom Hook useCounter

import React, { useState } from 'react';

// Custom Hook
function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue);

  const increment = () => setCount(count + 1);
  const decrement = () => setCount(count - 1);
  const reset = () => setCount(initialValue);

  return { count, increment, decrement, reset };
}

Menggunakan Custom Hook di Komponen

import React from 'react';
import ReactDOM from 'react-dom';
import { useCounter } from './useCounter'; // Import custom hook

function Counter() {
  const { count, increment, decrement, reset } = useCounter(0);

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

ReactDOM.render(
  <Counter />,
  document.getElementById('root')
);

Penjelasan Kode

1. Custom Hook useCounter:

   • useState: Menginisialisasi state count dengan nilai awal yang diberikan sebagai parameter (initialValue).

   • increment, decrement, reset: Fungsi untuk memperbarui state count.

   • Return: Mengembalikan objek yang berisi count, increment, decrement, dan reset.

2. Menggunakan Custom Hook di Komponen Counter:

   • Import useCounter: Mengimpor custom hook dari file lain.

   • Deklarasi: Memanggil useCounter untuk mendapatkan count, increment, decrement, dan reset.

   • Render: Menggunakan nilai dan fungsi yang dikembalikan oleh useCounter untuk membuat antarmuka pengguna.

Manfaat Custom Hooks

1. Reusabilitas: Custom hooks memungkinkan logika stateful digunakan kembali di beberapa komponen.

2. Modularitas: Memisahkan logika dari komponen membuat kode lebih modular dan mudah dibaca.

3. Kebersihan Kode: Mengurangi pengulangan kode dan menjaga komponen tetap fokus pada tampilan.

Sumber

• React Documentation - Building Your Own Hooks

• MDN Web Docs - React Custom Hooks

Dengan menggunakan custom hooks, Anda dapat memisahkan logika bisnis dari komponen presentasi, membuat aplikasi lebih modular dan mudah dikelola. Custom hooks juga memungkinkan logika yang rumit untuk digunakan kembali di berbagai tempat dalam aplikasi Anda.