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

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.
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

Reusabilitas: Custom hooks memungkinkan logika stateful digunakan kembali di beberapa komponen.
Modularitas: Memisahkan logika dari komponen membuat kode lebih modular dan mudah dibaca.
Kebersihan Kode: Mengurangi pengulangan kode dan menjaga komponen tetap fokus pada tampilan.

Sumber

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.

PreviousApa itu Hooks dalam React?NextApa itu Context API dalam React?

Last updated 9 months ago

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 }; }

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') );