Apa Itu Custom Hook di React? Cara Membuat dan Menggunakannya

Daftar Isi

  • Pendahuluan: Memahami Konsep Dasar React dan Masalah yang Sering Muncul
    • Apa Itu React dan Mengapa Penting Banget?
    • Mengenal "State" dan "Lifecycle" dalam Komponen React
    • Masalah yang Sering Ditemui: Duplikasi Kode dan Komponen yang Ruwet
  • Apa Itu Custom Hook? Solusi Cerdas untuk Mengatasi Duplikasi Kode
    • Definisi Custom Hook: "Fungsi Ajaib" untuk Reusabilitas Logika
    • Bagaimana Custom Hook Bekerja di Balik Layar? (Sederhana Saja)
    • Kapan Saatnya Kita Membutuhkan Custom Hook?
  • Langkah Demi Langkah: Cara Membuat Custom Hook Sendiri
    • Aturan Emas dalam Membuat Custom Hook (Sangat Penting!)
    • Studi Kasus Sederhana: useCounter (Mengatur Hitungan)
      1. Persiapan Awal: Instalasi Proyek React dengan Vite
      2. Identifikasi Logika yang Akan Diulang
      3. Membuat File Baru untuk Custom Hook
      4. Menulis Kode Custom Hook
      5. Penjelasan Kode per Baris
  • Praktik Nyata: Menggunakan Custom Hook yang Sudah Dibuat
    1. Mengimpor Custom Hook ke dalam Komponen React
    2. Memanggil Custom Hook dalam Komponen
    3. Menampilkan Hasil dan Memanfaatkan Logika
    4. Manfaat Lain: Menggunakan Custom Hook di Berbagai Komponen
    5. Cara Mengakses dan Menampilkan Komponen ProductQuantity
      • Impor dan Gunakan ProductQuantity di Komponen Utama (Contoh: App.jsx)
      • Jalankan Aplikasi React Kamu
  • Contoh Custom Hook Lain yang Sering Digunakan (dan Bisa Kamu Buat!)
    1. useFetch (Mengambil Data dari API)
    2. useLocalStorage (Menyimpan Data di Browser)
    3. useForm (Mengelola Input Form)
  • Studi Kasus & Sumber Belajar Terpercaya ( BuildWithAngga )
    • Belajar dari Real Project, Bukan Teori Doang
    • Visual Interaktif & UI Keren
    • Materi Up-to-date & Fokus ke Industri
    • Penjelasan Simpel, Bahasa Indonesia
    • Mentoring & Sertifikat Karier
  • Kesimpulan: Custom Hook, Pembantu Setia untuk Kode React yang Bersih dan Efisien
    • Rangkuman Manfaat Utama Custom Hook
    • Dorongan untuk Eksplorasi Lebih Lanjut
    • Sumber Daya Tambahan

Pendahuluan: Memahami Konsep Dasar React dan Masalah yang Sering Muncul

React Like Lego

Pernahkah kamu membayangkan bagaimana aplikasi website yang kita gunakan sehari-hari, seperti Instagram, Facebook, atau bahkan dashboard e-commerce, bisa begitu interaktif dan responsif? Nah, di balik layar, ada banyak teknologi keren yang bekerja, dan salah satunya adalah React.

⭐ Apa Itu React dan Mengapa Penting Banget?

Bayangkan kamu sedang membangun sebuah rumah lego impian. Kamu punya banyak balok lego dengan berbagai bentuk dan ukuran, kan? Ada balok untuk dinding, atap, jendela, dan sebagainya. Kamu bisa menyusun balok-balok itu menjadi satu kesatuan rumah yang indah.

Nah, React itu mirip seperti kumpulan balok lego digital untuk membuat tampilan website atau aplikasi. Alih-alih balok fisik, React menyediakan "balok-balok" kode yang disebut komponen. Setiap komponen ini punya tugasnya masing-masing. Ada komponen untuk tombol, ada untuk kotak teks, ada untuk header, dan lain-lain. Dengan React, kamu bisa merangkai komponen-komponen kecil ini menjadi satu tampilan website yang utuh dan kompleks.

Kenapa penting? Karena React membuat proses pengembangan website jadi jauh lebih efisien. Daripada harus menulis ulang kode untuk setiap elemen yang muncul berulang kali di halaman, kita cukup membuat satu komponen, lalu bisa menggunakannya di mana saja kita mau. Ini bikin kodenya lebih rapi, gampang diatur, dan tentunya menghemat banyak waktu!

⭐ Mengenal "State" dan "Lifecycle" dalam Komponen React

Setelah kita tahu React itu kayak lego digital, sekarang mari kita kenalan dengan dua konsep penting yang bikin komponen React jadi "hidup": State dan Lifecycle.

Pertama, State. Gampangnya, State adalah data yang bisa berubah di dalam sebuah komponen. Coba bayangkan sebuah tombol "Like" di media sosial. Awalnya, tombol itu mungkin menunjukkan angka 0 like. Ketika kamu mengkliknya, angkanya berubah jadi 1, lalu 2, dan seterusnya. Nah, angka like yang berubah itulah yang disebut sebagai State dari tombol tersebut. React punya cara khusus untuk mengelola State ini agar komponen bisa otomatis memperbarui tampilannya saat datanya berubah. Di sinilah peran penting useState, sebuah "kait" (hook) yang disediakan React untuk membantumu mengatur dan mengubah State ini dengan mudah.

Kedua, Lifecycle. Ini adalah tahapan hidup sebuah komponen. Sama seperti manusia yang punya fase lahir, tumbuh, dan meninggal, komponen React juga punya siklus hidupnya sendiri. Misalnya, ada tahap saat komponen baru "lahir" dan muncul di layar, tahap saat ia "tumbuh" dan mengalami perubahan data, sampai tahap di mana ia "meninggal" atau dihapus dari layar. Kamu mungkin bertanya, "Buat apa tahu ini?" Nah, pengetahuan tentang Lifecycle ini sangat berguna, terutama saat kita perlu melakukan sesuatu di waktu-waktu tertentu. Misalnya, saat komponen baru muncul, kamu mungkin ingin mengambil data dari internet. Atau, saat komponen akan dihilangkan, kamu ingin membersihkan sesuatu. Untuk membantu kita "mengatur" apa yang terjadi di setiap tahapan ini, React menyediakan useEffect. Dengan useEffect, kamu bisa "memerintahkan" React untuk melakukan sesuatu di momen-momen tertentu dalam siklus hidup komponenmu.

⭐ Masalah yang Sering Ditemui: Duplikasi Kode dan Komponen yang Ruwet

Oke, kamu sudah mulai paham React, State, dan Lifecycle. Tapi, ada satu masalah klasik yang sering banget dihadapi para pengembang React, terutama saat proyeknya mulai membesar: duplikasi kode dan komponen yang jadi ruwet.

Mari kita pakai analogi lagi. Bayangkan kamu punya tiga kamar di rumah legomu, dan setiap kamar butuh sebuah "lampu ajaib" yang bisa menyala otomatis saat gelap. Logika untuk "lampu ajaib" ini sama persis di setiap kamar. Awalnya, kamu mungkin menulis kode lampu ini di setiap komponen kamar. Tapi, bayangkan kalau kamu punya 10 kamar, atau bahkan 100 kamar! Kamu akan menulis kode yang sama berulang kali, kan? Ini namanya duplikasi kode.

Masalahnya, kalau nanti ada perubahan di "logika lampu ajaib" (misalnya, kamu mau lampunya berkedip dulu sebelum menyala), kamu harus mengubahnya di setiap komponen kamar satu per satu. Repot banget, kan?

Selain itu, ketika kamu memasukkan terlalu banyak logika (seperti logika lampu ajaib, logika pintu otomatis, logika pendingin ruangan) ke dalam satu komponen kamar, komponen itu akan jadi sangat panjang dan ruwet. Sulit dibaca, sulit dipahami, dan bahkan sulit diperbaiki kalau ada bug.

Di sinilah Custom Hook akan datang sebagai pahlawan super! Tapi itu akan kita bahas di bab berikutnya. Untuk saat ini, semoga kamu sudah mendapatkan gambaran jelas tentang dasar-dasar React dan kenapa kita butuh solusi cerdas untuk masalah-masalah di atas. Yuk melanjutkan petualangan ini.

Apa Itu Custom Hook? Solusi Cerdas untuk Mengatasi Duplikasi Kode

Custom Hook Use Counter

Di bab sebelumnya, kita sudah bahas betapa ribetnya kalau kita harus menulis ulang kode yang sama berkali-kali atau kalau satu komponen jadi terlalu "gemuk" dengan banyak logika. Nah, di sinilah Custom Hook datang sebagai penyelamat.

⭐ Definisi Custom Hook: "Fungsi Ajaib" untuk Reusabilitas Logika

Jadi, apa sih Custom Hook itu? Gampangnya, Custom Hook adalah sebuah fungsi JavaScript biasa yang punya "kekuatan super" karena bisa menggunakan Hook bawaan React (seperti useState dan useEffect) di dalamnya. Satu-satunya "aturan" yang harus kamu ingat adalah namanya harus selalu dimulai dengan kata use. Contohnya? useData, useForm, useTimer, dan seterusnya.

Tujuan utama Custom Hook ini sangat mulia: mengemas logika yang sering kamu pakai atau butuhkan di banyak tempat agar bisa digunakan ulang dengan mudah di berbagai komponen React. Bayangkan kamu punya resep rahasia untuk membuat kue bolu yang lezat. Daripada setiap kali mau bikin kue harus menulis ulang resepnya dari nol, kamu cukup menulis resep itu sekali saja di buku resepmu, lalu tinggal merujuk ke sana setiap kali kamu ingin membuat kue bolu. Nah, Custom Hook ini adalah "buku resep" digital untuk logika Reactmu.

⭐ Bagaimana Custom Hook Bekerja di Balik Layar? (Sederhana Saja)

Kamu mungkin bertanya-tanya, "Kok bisa sih fungsi biasa jadi 'ajaib'?" Rahasianya sederhana. Sebuah Custom Hook itu pada dasarnya adalah wadah. Di dalam wadah itu, kamu bisa menggunakan semua Hook bawaan React yang sudah kita kenal, seperti useState untuk mengelola data yang berubah, atau useEffect untuk menjalankan sesuatu di momen-momen tertentu dalam hidup komponen.

Anggaplah Custom Hook itu seperti "kotak perkakas" yang berisi alat-alat React (misalnya useState, useEffect, dll.) yang sudah kamu atur dan susun dengan rapi untuk tugas tertentu. Misalnya, kamu punya kotak perkakas khusus untuk "perbaikan listrik" yang isinya obeng, tang, dan tespen. Kamu nggak perlu lagi nyari-nyari alat itu di seluruh gudang setiap kali mau benerin listrik, cukup ambil kotak perkakasnya.

Sama seperti itu, Custom Hook mengemas logika kompleks (yang mungkin melibatkan useState, useEffect, dan fungsi lainnya) menjadi satu fungsi yang mudah dipanggil. Ketika kamu menggunakan Custom Hook di sebuah komponen, React akan tahu bagaimana cara menjalankan semua Hook bawaan yang ada di dalamnya, seolah-olah kamu menuliskannya langsung di dalam komponen tersebut.

⭐ Kapan Saatnya Kita Membutuhkan Custom Hook?

Mungkin kamu masih ragu, "Kapan sih saya benar-benar butuh Custom Hook?" Gini, ada beberapa tanda jelas bahwa ini saatnya kamu "memanggil" Custom Hook:

  1. Ketika ada logika yang sama di lebih dari satu komponen. Ini adalah alasan paling umum. Misalnya, kamu punya dua halaman berbeda (katakanlah halaman profil pengguna dan halaman detail produk), dan keduanya perlu logika untuk mengambil data dari server, menampilkan loading state, dan menangani error. Daripada menulis logika fetch data ini dua kali, lebih baik kamu bungkus jadi satu Custom Hook, misalnya useFetchData.
  2. Ketika sebuah komponen terasa terlalu "gemuk" dengan banyak logika yang tidak langsung berhubungan dengan tampilannya. Kadang-kadang, satu komponen React bisa jadi sangat panjang dan sulit dibaca karena berisi banyak sekali kode untuk mengelola data, form, timer, atau interaksi lainnya. Dengan Custom Hook, kamu bisa "memisahkan" logika-logika ini ke fungsi terpisah, membuat komponenmu lebih fokus pada apa yang harus ia tampilkan, dan meninggalkan urusan logikanya pada Custom Hook.
  3. Contoh kasus nyata:
    • Mengelola data dari API: Ini sering banget terjadi. Kamu perlu loading state, error handling, dan menyimpan data yang diambil. Ini semua bisa jadi satu useFetch Custom Hook.
    • Validasi form: Memeriksa apakah input pengguna sudah benar (misalnya, email harus formatnya benar, password minimal 8 karakter). Daripada menulis validasi di setiap form, buat saja useFormValidation.
    • Mengatur timer atau interval: Misalnya, untuk countdown atau menampilkan notifikasi sementara. Kamu bisa punya useTimer atau useInterval.
    • Berinteraksi dengan browser storage (LocalStorage/SessionStorage): Menyimpan preferensi pengguna atau token autentikasi. Ini bisa jadi useLocalStorage.

Intinya, jika kamu menemukan diri kamu menulis kode yang sama berulang kali, atau komponenmu mulai terlihat seperti "monster" dengan terlalu banyak tugas, maka itu adalah sinyal kuat bahwa kamu butuh Custom Hook! Siap untuk belajar cara membuatnya sendiri? Yuk, kita ke bab selanjutnya!

Langkah Demi Langkah: Cara Membuat Custom Hook Sendiri

React Custom Hook Use Counter

Sekarang, setelah kamu tahu apa itu Custom Hook dan kenapa kita membutuhkannya, saatnya kita coba bikin sendiri! Jangan khawatir, prosesnya nggak serumit yang kamu bayangkan. Kita akan membuat Custom Hook yang sederhana tapi sangat berguna: useCounter. Ini adalah Custom Hook yang bisa kamu pakai untuk mengatur hitungan naik, turun, dan meresetnya.

⭐ Aturan Emas dalam Membuat Custom Hook (Sangat Penting!)

Sebelum kita mulai menulis kode, ada dua "aturan emas" yang wajib kamu ingat kalau mau bikin Custom Hook. Ini bukan cuma rekomendasi, tapi benar-benar wajib diikuti supaya Custom Hook-mu bekerja dengan benar dan sesuai standar React:

  • Harus diawali dengan kata use.

Ya, sesimpel itu! Setiap Custom Hook yang kamu buat harus selalu diawali dengan prefiks use. Contohnya: useFetch, useLocalStorage, useInput, atau seperti yang akan kita buat: useCounter. Aturan ini bukan sekadar gaya-gayaan, tapi membantu React mengidentifikasi bahwa itu adalah Hook, dan juga membantu tools pengembangan (seperti linters) untuk memastikan kamu menggunakannya dengan benar.

  • Hanya boleh dipanggil di dalam komponen fungsi React atau Custom Hook lainnya.

Ingat kembali kalau Hook bawaan React (useState, useEffect, dll.) itu punya aturan di mana mereka hanya boleh dipanggil di level teratas (paling atas) dari komponen fungsi React atau Custom Hook lainnya. Nah, karena Custom Hook-mu akan menggunakan Hook bawaan ini di dalamnya, maka aturan yang sama berlaku untuk Custom Hook-mu. Kamu tidak boleh memanggil Custom Hook di dalam perulangan (for atau while), di dalam kondisi (if), atau di dalam fungsi JavaScript biasa (yang bukan komponen React atau Hook lainnya). Ini penting untuk memastikan React bisa melacak State dan efek samping dengan benar.

⭐ Studi Kasus Sederhana: useCounter (Mengatur Hitungan)

1. Persiapan Awal: Instalasi Proyek React dengan Vite

Kalau kamu belum punya proyek React yang siap pakai, jangan khawatir! Vite adalah tool super cepat yang akan membantu kita membuat proyek React dalam hitungan detik. Ikuti langkah-langkah ini:

  • Buka Terminal atau Command Prompt:
Open Terminal

Cari aplikasi "Terminal" (di macOS/Linux) atau "Command Prompt"/"PowerShell" (di Windows) di komputermu. Buka aplikasi tersebut.

  • Buat Proyek React Baru Menggunakan Vite:
Installation Project First Steps

Di terminal, ketik perintah berikut:

npm create vite@latest

Atau jika kamu menggunakan Yarn:

yarn create vite

Atau jika kamu menggunakan pnpm:

pnpm create vite

Setelah itu, kamu akan diminta beberapa informasi:

  • Project name: Ketik nama proyekmu, misalnya my-react-app-hooks. Tekan Enter.
Project Name
  • Select a framework: Pilih React (gunakan tombol panah atas/bawah, lalu Enter).
Select Tech
  • Select a variant: Pilih JavaScript (atau TypeScript jika kamu sudah terbiasa). Tekan Enter.
Select Detail Tech

Ketika kamu memilih JavaScript sebagai variant saat membuat proyek React dengan Vite, kamu biasanya akan dihadapkan pada dua pilihan lagi:

  • JavaScript (biasanya ini berarti menggunakan Babel sebagai transpiler)
  • JavaScript + SWC

Apa bedanya dan mana yang harus kamu pilih?

SWC (Speedy Web Compiler) adalah tool yang relatif baru dan sangat cepat untuk mengompilasi kode JavaScript/TypeScript. Dibandingkan Babel (yang sering jadi default), SWC menawarkan performa yang jauh lebih ngebut dalam proses kompilasi kode kamu. Ini berarti waktu start proyek lebih cepat dan hot module replacement (saat kamu mengubah kode dan hasilnya langsung terlihat di browser) juga lebih responsif.

Rekomendasiku untuk kamu:

<aside> ✅

Pilih JavaScript + SWC.

</aside>

Kenapa?

  1. Performa: Ini adalah alasan utamanya. SWC jauh lebih cepat. Untuk belajar dan mengembangkan aplikasi, waktu tunggu yang lebih singkat saat kode di-compile itu sangat menyenangkan dan bisa meningkatkan produktivitasmu.
  2. Modern: SWC adalah pilihan yang lebih modern dan banyak digunakan dalam proyek-proyek baru karena keunggulannya dalam kecepatan.
  3. Tidak Ada Perbedaan Kode: Sebagai pengguna, kamu tidak perlu menulis kode React dengan cara yang berbeda. Baik kamu memilih JavaScript biasa atau JavaScript + SWC, sintaks React dan JavaScript yang kamu tulis akan tetap sama. Perbedaannya hanya pada tool di balik layar yang mengolah kode tersebut.

Jadi, kalau kamu melihat opsi JavaScript + SWC, langsung pilih saja itu ya! Kamu akan merasakan pengalaman pengembangan yang lebih mulus dan cepat.

Vite akan secara otomatis membuat folder baru dengan nama proyekmu dan mengisi dengan boilerplate (kode dasar) React.

  • Masuk ke Folder Proyek dan Instal Dependensi:
Enter Project Folder

Setelah proyek berhasil dibuat, masuklah ke dalam folder proyekmu menggunakan perintah cd:

cd my-react-app-hooks

Lalu, instal semua library yang dibutuhkan proyek dengan perintah:

Install Depedency
npm install

Atau jika kamu menggunakan Yarn/pnpm:

yarn
# atau
pnpm install
  • Jalankan Aplikasi React-mu:

Setelah instalasi selesai, kamu bisa mencoba menjalankan aplikasi React dasar ini dengan perintah:

npm run dev

Atau jika kamu menggunakan Yarn/pnpm:

yarn dev
# atau
pnpm dev

Hasilnya seperti ini:

Link to Result View

Terminal akan menampilkan alamat lokal di mana aplikasi React-mu berjalan (biasanya http://localhost:5173/). Buka alamat itu di browser-mu, dan kamu akan melihat logo React berputar! Selamat, proyekmu sudah siap!

Result
  • Studi Kasus Nanti

Untuk mempermudah pemahaman, kita akan membuat Custom Hook yang sangat praktis: useCounter. Ini adalah contoh sempurna bagaimana kita bisa "mengisolasi" logika sederhana yang mungkin sering kamu butuhkan.

2. Identifikasi Logika yang Akan Diulang

Pikirkan sejenak, apa saja sih yang kita butuhkan dari sebuah fitur penghitung angka?

  • Kita butuh sebuah angka yang bisa berubah (ini pasti State!).
  • Kita butuh fungsi untuk menambah angka itu (misal: increment).
  • Kita butuh fungsi untuk mengurangi angka itu (misal: decrement).
  • Dan mungkin, kita butuh fungsi untuk mereset angka kembali ke nilai awal (misal: reset).

Logika count, increment, decrement, dan reset ini adalah kandidat sempurna untuk dijadikan Custom Hook karena kemungkinan besar akan dibutuhkan di banyak tempat (misalnya, di keranjang belanja, di game sederhana, atau di fitur polling).

3. Membuat File Baru untuk Custom Hook

Create File

Disarankan untuk menyimpan Custom Hook dalam folder terpisah agar proyekmu tetap terorganisir. Biasanya, orang membuat folder bernama hooks di dalam folder src. Jadi, mari kita buat file baru: src/hooks/useCounter.js.

4. Menulis Kode Custom Hook

Paste Custom Hook

Sekarang, mari kita isi file useCounter.js dengan kode "ajaib" kita:

// src/hooks/useCounter.js
import { useState } from 'react'; // Kita perlu useState karena Custom Hook ini akan mengelola "State" (si angka hitungan)

const useCounter = (initialValue = 0) => { // Ini adalah fungsi Custom Hook kita. Namanya diawali 'use'!
  // Kita menggunakan useState untuk menyimpan nilai hitungan (count)
  // initialValue adalah nilai awal hitungan, default-nya 0 kalau tidak diberikan
  const [count, setCount] = useState(initialValue); 

  // Fungsi untuk menambah hitungan
  const increment = () => {
    setCount(prevCount => prevCount + 1); // Kita pakai prevCount untuk memastikan nilai terbaru
  };

  // Fungsi untuk mengurangi hitungan
  const decrement = () => {
    setCount(prevCount => prevCount - 1); // Sama, pakai prevCount
  };

  // Fungsi untuk mereset hitungan kembali ke nilai awal
  const reset = () => {
    setCount(initialValue); // Kita set kembali ke initialValue yang diberikan saat Hook dipanggil
  };

  // Custom Hook ini akan mengembalikan nilai "count" dan fungsi-fungsi "increment", "decrement", "reset"
  // Kita mengembalikannya dalam bentuk objek agar mudah di-destructuring nanti
  return { count, increment, decrement, reset };
};

export default useCounter; // Jangan lupa di-export agar bisa dipakai di komponen lain

5. Penjelasan Kode per Baris

Mari kita bedah kode di atas agar kamu benar-benar paham apa yang terjadi:

  • import { useState } from 'react';:

Baris ini adalah hal pertama yang harus kamu lakukan. Karena Custom Hook ini akan "mengurus" data yang berubah (yaitu count), kita perlu mengimpor Hook bawaan React bernama useState. Ingat, Custom Hook itu dibangun di atas Hook bawaan!

  • const useCounter = (initialValue = 0) => { ... };:

Ini adalah definisi fungsi Custom Hook kita.

  1. useCounter: Namanya sudah memenuhi aturan emas, diawali dengan use.
  2. (initialValue = 0): Ini adalah parameter yang bisa kita berikan saat memanggil Custom Hook ini nanti. Artinya, kita bisa menentukan nilai awal hitungannya. Jika kita tidak memberikan nilai, secara default akan menjadi 0. Ini membuat Custom Hook kita fleksibel!
  3. => { ... };: Ini menunjukkan bahwa useCounter adalah sebuah arrow function, bentuk penulisan fungsi JavaScript yang modern dan ringkas.
  • const [count, setCount] = useState(initialValue);:

Di sinilah useState bekerja!

  1. useState(initialValue): Kita memanggil useState dan memberinya nilai awal (yang berasal dari parameter initialValue).
  2. [count, setCount]: useState akan mengembalikan sebuah array dengan dua elemen. Elemen pertama (count) adalah nilai state kita saat ini (angkanya). Elemen kedua (setCount) adalah sebuah fungsi yang bisa kita panggil untuk mengubah nilai count. Ingat, untuk mengubah state, kamu harus pakai fungsi setCount, jangan langsung mengubah count secara langsung!
  • const increment = () => { setCount(prevCount => prevCount + 1); };:

Ini adalah fungsi increment.

  1. Ketika increment dipanggil, ia akan memanggil setCount untuk mengubah nilai count.
  2. prevCount => prevCount + 1: Ini adalah pola yang sangat penting saat mengubah state yang nilainya bergantung pada nilai sebelumnya. Daripada langsung setCount(count + 1), kita menggunakan prevCount. Ini memastikan bahwa kita selalu menggunakan nilai count yang paling mutakhir, terutama jika ada beberapa pembaruan state yang terjadi secara berdekatan. Jadi, setCount akan menerima nilai count sebelumnya, lalu kita tambahkan 1.
  • const decrement = () => { setCount(prevCount => prevCount - 1); };:

Sama seperti increment, tapi ini mengurangi count sebesar 1.

  • const reset = () => { setCount(initialValue); };:

Fungsi reset ini akan mengembalikan nilai count ke initialValue yang kita berikan saat Custom Hook ini pertama kali dipanggil.

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

Ini adalah bagian krusial terakhir. Sebuah Custom Hook harus mengembalikan sesuatu agar komponen yang menggunakannya bisa mendapatkan akses ke state dan fungsi-fungsi yang dikelolanya.

  1. Kita mengembalikan sebuah objek ({ }) yang berisi count, increment, decrement, dan reset. Mengapa objek? Karena ini memungkinkan kita untuk menggunakan object destructuring saat memakainya nanti di komponen, membuat kodenya sangat rapi dan mudah dibaca.

Selamat! Kamu sudah berhasil membuat Custom Hook pertamamu. Sekarang, kamu mungkin penasaran bagaimana cara menggunakannya di komponen React, kan? Kita akan bahas itu di bagian selanjutnya!

Praktik Nyata: Menggunakan Custom Hook yang Sudah Dibuat

Oke, kamu sudah berhasil membuat Custom Hook useCounter yang keren! Sekarang saatnya kita membuktikan "kesaktiannya" dengan menggunakannya langsung di dalam komponen React. Kamu akan melihat sendiri betapa ringkas dan rapinya kode setelah kita memanfaatkan Custom Hook ini.

1. Mengimpor Custom Hook ke dalam Komponen React

Langkah pertama, sama seperti saat kamu ingin menggunakan komponen React lain atau utility function dari file berbeda, kamu perlu mengimpor Custom Hook-mu.

Bayangkan kamu punya file komponen utama, misalnya App.js, atau komponen lain seperti ProductQuantity.js, ScoreDisplay.js, dan sebagainya. Di file komponen itulah kamu akan mengimpor useCounter.

Misalnya, di file App.js milikmu, hapus dulu kode defaultnya sampai seperti ini:

Remove Code

Tuliskan kode seperti ini di bagian paling atas:

Paste Import Code
// src/App.js
import React from 'react';
import useCounter from './hooks/useCounter'; // Ini dia! Kita mengimpor Custom Hook useCounter dari folder hooks
// ...kode komponen lainnya

<aside> 💡

Penting untuk memastikan jalur (path) impornya benar. Kalau file useCounter.js ada di dalam folder src/hooks, dan App.js ada di src, maka jalur impornya adalah ./hooks/useCounter.

</aside>

2. Memanggil Custom Hook dalam Komponen

Setelah diimpor, sekarang saatnya memanggil useCounter di dalam komponen fungsional React kamu.

<aside> 💡

Ingat aturan emas: Hook (termasuk Custom Hook) hanya bisa dipanggil di level teratas komponen fungsional React.

</aside>

Mari kita buat contoh sederhana di komponen App.js:

Paste Code
// src/App.js
import React from 'react';
import useCounter from './hooks/useCounter';

function App() {
  // ----- Ini dia bagian intinya! -----
  // Kita memanggil useCounter dan memberinya nilai awal 10.
  // Custom Hook ini akan mengembalikan objek { count, increment, decrement, reset }.
  // Kita gunakan "object destructuring" untuk mengambil nilai dan fungsi-fungsi ini.
  const { count, increment, decrement, reset } = useCounter(10); 
  // -----------------------------------

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Aplikasi Penghitungku</h1>
      <p>
        Nilai Saat Ini: <strong>{count}</strong> {/* Menampilkan nilai count */}
      </p>
      <button onClick={increment} style={{ margin: '5px', padding: '10px 20px' }}>
        Tambah (+)
      </button>
      <button onClick={decrement} style={{ margin: '5px', padding: '10px 20px' }}>
        Kurang (-)
      </button>
      <button onClick={reset} style={{ margin: '5px', padding: '10px 20px' }}>
        Reset
      </button>
    </div>
  );
}

export default App;

Perhatikan baris ini: const { count, increment, decrement, reset } = useCounter(10);

  • useCounter(10): Kita memanggil useCounter dan memberinya nilai awal 10. Artinya, penghitung kita akan dimulai dari angka 10. Kalau kamu tidak memberikan nilai, ia akan menggunakan nilai default yang sudah kita atur di Custom Hook, yaitu 0.
  • const { count, increment, decrement, reset }: Ini adalah fitur JavaScript yang disebut Object Destructuring. Karena useCounter mengembalikan sebuah objek dengan properti count, increment, decrement, dan reset, kita bisa langsung "mengambil" properti-properti tersebut ke dalam variabel dengan nama yang sama. Ini membuat kodenya sangat ringkas dan mudah dibaca, daripada harus menulis counter.count, counter.increment, dan seterusnya.

3. Menampilkan Hasil dan Memanfaatkan Logika

Result

Setelah memanggil Custom Hook dan mendapatkan nilai count serta fungsi increment, decrement, dan reset, kita bisa langsung menggunakannya di JSX (bagian tampilan) komponen kita:

// ... (bagian atas kode yang sama)

  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Aplikasi Penghitungku</h1>
      <p>
        Nilai Saat Ini: <strong>{count}</strong> {/* Kita langsung pakai variabel 'count' */}
      </p>
      <button onClick={increment} style={{ margin: '5px', padding: '10px 20px' }}>
        Tambah (+) {/* Saat tombol diklik, panggil fungsi 'increment' */}
      </button>
      <button onClick={decrement} style={{ margin: '5px', padding: '10px 20px' }}>
        Kurang (-) {/* Saat tombol diklik, panggil fungsi 'decrement' */}
      </button>
      <button onClick={reset} style={{ margin: '5px', padding: '10px 20px' }}>
        Reset {/* Saat tombol diklik, panggil fungsi 'reset' */}
      </button>
    </div>
  );
}

// ... (export default App)

Lihat betapa bersihnya komponen App sekarang! Semua logika untuk mengelola count (yaitu useState, setCount, logika increment, decrement, dan reset) sudah "tersembunyi" rapi di dalam useCounter. Komponen App hanya perlu tahu: "Saya butuh angka hitungan ini, dan saya punya tombol untuk menambah, mengurangi, atau meresetnya." Ia tidak perlu peduli bagaimana hitungan itu bekerja di baliknya.

Summary

Ini adalah inti dari manfaat Custom Hook: membuat kode komponenmu ringkas, fokus pada tampilannya, dan lebih mudah dibaca serta dikelola. Kamu tidak perlu lagi melihat deretan useState dan fungsi-fungsi panjang di dalam komponen utama hanya untuk sebuah penghitung sederhana.

4. Manfaat Lain: Menggunakan Custom Hook di Berbagai Komponen

Nah, inilah salah satu kekuatan super Custom Hook yang paling menonjol: reusabilitas!

Bayangkan kamu punya beberapa bagian di aplikasi yang butuh penghitung terpisah:

  • Komponen ProductQuantity untuk memilih jumlah barang di keranjang belanja.
  • Komponen GameScore untuk menampilkan skor pemain di sebuah game.
  • Komponen PollVotes untuk menghitung jumlah suara pada sebuah polling.

Tanpa Custom Hook, kamu mungkin harus menulis ulang kode useState dan fungsi increment/decrement/reset di setiap komponen tersebut. Ini akan menghasilkan banyak duplikasi kode yang kita bicarakan di awal.

Dengan useCounter, kamu cukup mengimpor dan memanggilnya di setiap komponen yang membutuhkannya:

Paste Code in ProductQuantity.jsx
// src/components/ProductQuantity.jsx
import React from 'react';
import useCounter from '../hooks/useCounter'; // Impor lagi!

function ProductQuantity() {
  // Misalnya, kuantitas produk dimulai dari 1
  const { count: quantity, increment, decrement } = useCounter(1); // Kita bisa ganti nama variabel 'count' jadi 'quantity'

  return (
    <div>
      <h3>Jumlah Produk</h3>
      <button onClick={decrement}>-</button>
      <span> {quantity} </span>
      <button onClick={increment}>+</button>
    </div>
  );
}
export default ProductQuantity;

// --- DAN ---

// src/components/GameScore.jsx
import React from 'react';
import useCounter from '../hooks/useCounter'; // Impor lagi!

function GameScore() {
  // Skor dimulai dari 0
  const { count: score, increment, reset } = useCounter(0); // Kita bisa ganti nama variabel 'count' jadi 'score'

  return (
    <div>
      <h2>Skor Game</h2>
      <p>Poin: {score}</p>
      <button onClick={increment}>Tambah Poin</button>
      <button onClick={reset}>Reset Skor</button>
    </div>
  );
}
export default GameScore;

5. Cara Mengakses dan Menampilkan Komponen ProductQuantity

Setelah kamu membuat komponen ProductQuantity yang menggunakan Custom Hook useCounter, langkah selanjutnya adalah menampilkannya di aplikasi React-mu. Gampangnya, kamu perlu mengimpor komponen ProductQuantity ini ke dalam komponen lain (biasanya App.js atau komponen parent lainnya) dan meletakkannya di sana.

Berikut langkah-langkah detailnya:

👨🏻‍💻 Impor dan Gunakan ProductQuantity di Komponen Utama (Contoh: App.jsx)

Biasanya, App.jsx (atau App.js) adalah komponen utama yang menjadi wadah bagi komponen-komponen lain dalam aplikasimu. Di sinilah kamu akan mengimpor ProductQuantity dan menampilkannya.

Buka file src/App.jsx (atau src/App.js) dan ubah kodenya menjadi seperti ini:

Paste Code in App.jsx
// src/App.jsx

import React from 'react';
// Kita akan menghapus impor useCounter di App.jsx ini
// karena App.jsx tidak lagi secara langsung menggunakan useCounter.
// useCounter sudah digunakan di dalam ProductQuantity.jsx.

// --- Impor komponen ProductQuantity yang sudah kamu buat ---
import ProductQuantity from './components/ProductQuantity'; 
// Pastikan path-nya benar sesuai lokasi file ProductQuantity.jsx

function App() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px', fontFamily: 'Arial, sans-serif' }}>
      <h1>Selamat Datang di Toko Online Sederhana</h1>
      <p>Ini adalah contoh bagaimana Custom Hook bisa dipakai untuk mengatur kuantitas produk.</p>

      {/* --- Panggil komponen ProductQuantity di sini! --- */}
      <div style={{ border: '1px solid #ccc', padding: '20px', borderRadius: '8px', maxWidth: '300px', margin: '20px auto' }}>
        <ProductQuantity />
      </div>
      {/* ----------------------------------------------- */}

      <p style={{ marginTop: '30px', fontSize: '0.9em', color: '#666' }}>
        Kuantitas di atas dikelola oleh Custom Hook `useCounter` di dalam komponen `ProductQuantity`.
      </p>
    </div>
  );
}

export default App;

Penjelasan Perubahan:

  • import ProductQuantity from './components/ProductQuantity';: Baris ini memberi tahu React bahwa kita ingin menggunakan komponen ProductQuantity yang berada di src/components/ProductQuantity.jsx (atau .js). Pastikan jalur filenya sesuai dengan lokasi filemu.
  • <ProductQuantity />: Ini adalah cara kita "memanggil" atau "menggunakan" komponen ProductQuantity di dalam komponen App. Ketika React merender App, ia akan melihat <ProductQuantity /> dan kemudian merender isi dari komponen ProductQuantity tersebut, termasuk tombol +, , dan angka kuantitas yang dikelola oleh useCounter.

👨🏻‍💻 Jalankan Aplikasi React Kamu

Jika kamu belum menjalankan server pengembangan, buka terminal di folder proyekmu (my-react-app-hooks/) dan jalankan perintah:

npm run dev
# atau yarn dev
# atau pnpm dev

Server akan berjalan, dan kamu bisa mengakses aplikasi di browser (biasanya http://localhost:5173/).

Kamu sekarang seharusnya melihat tampilan seperti ini:

Result
Selamat Datang di Toko Online Sederhana
Ini adalah contoh bagaimana Custom Hook bisa dipakai untuk mengatur kuantitas produk.

+--------------------------+
|      Jumlah Produk       |
|  <button>-</button> 1 <button>+</button> |
+--------------------------+

Kuantitas di atas dikelola oleh Custom Hook `useCounter` di dalam komponen `ProductQuantity`.

Kamu bisa mencoba mengklik tombol + dan - di samping angka kuantitas. Angka akan berubah, dan ini membuktikan bahwa Custom Hook useCounter di dalam ProductQuantity berfungsi dengan baik!

Beginilah cara kamu mengintegrasikan komponen yang menggunakan Custom Hook ke dalam struktur aplikasi React-mu. Setiap kali kamu membuat komponen baru yang menggunakan Custom Hook, prosesnya akan serupa: buat Custom Hook-nya, buat komponen yang menggunakannya, lalu impor dan tampilkan komponen tersebut di mana pun kamu inginkan dalam aplikasi.

Lihat? Setiap komponen mendapatkan "penghitung" masing-masing, dan kamu tidak perlu menulis ulang logika intinya. Cukup panggil useCounter, dan atur nilai awalnya sesuai kebutuhan komponen tersebut. Keren, kan?

Inilah mengapa Custom Hook adalah alat yang sangat powerful dalam pengembangan React. Ia memungkinkanmu untuk menulis kode yang lebih bersih, lebih terorganisir, dan paling penting, sangat mudah digunakan kembali di berbagai bagian aplikasimu. Yuk melihat contoh Custom Hook lainnya yang sering digunakan.

Contoh Custom Hook Lain yang Sering Digunakan (dan Bisa Kamu Buat!)

Setelah kita berhasil membuat dan menggunakan useCounter, kamu pasti sudah merasakan "kekuatan" dari Custom Hook, kan? Bayangkan kalau kita bisa menerapkan prinsip yang sama untuk masalah-masalah umum lainnya dalam pengembangan web. Tentu saja bisa! Ada beberapa pola Custom Hook yang sangat populer dan sering digunakan karena mereka menyelesaikan masalah duplikasi kode yang sangat umum.

Yuk, kita bedah beberapa contoh Custom Hook lain yang bukan cuma sering kamu temui, tapi juga bisa kamu coba buat sendiri!

1. useFetch (Mengambil Data dari API)

Hampir setiap aplikasi web modern pasti butuh mengambil data dari server atau API (Application Programming Interface). Proses ini seringkali melibatkan beberapa tahapan:

  • Loading: Menampilkan indikator bahwa data sedang diambil (misalnya, tulisan "Loading..." atau ikon berputar).
  • Data: Menyimpan data yang berhasil diambil.
  • Error: Menangani jika terjadi kesalahan saat pengambilan data (misalnya, tidak ada koneksi internet, server eror, dll.).

Bayangkan kalau setiap kali kamu mau mengambil data, kamu harus menulis kode untuk ketiga tahapan ini di setiap komponen. Pasti panjang, membosankan, dan rawan kesalahan, kan? Inilah tugasnya useFetch.

Bagaimana useFetch bekerja?

Sebuah Custom Hook useFetch akan mengemas seluruh logika pengambilan data, termasuk pengelolaan state isLoading, isError, dan data itu sendiri. Jadi, di dalamnya, ia akan menggunakan useState untuk menyimpan ketiga state tersebut, dan useEffect untuk melakukan proses fetch data saat komponen pertama kali dirender atau saat ada dependensi yang berubah.

Manfaatnya luar biasa:

  • Tidak perlu menulis ulang boilerplate fetch di setiap komponen. Kamu cukup memanggil useFetch('URL_API_kamu') di komponen mana pun yang butuh data.
  • Logika terpusat. Jika ada perubahan pada cara kamu mengambil data atau menanganinya, kamu cukup mengubahnya di satu tempat: file useFetch.js. Semua komponen yang menggunakan useFetch akan otomatis mendapatkan pembaruan tersebut.
  • Kode komponen jadi bersih. Komponenmu tidak lagi dibanjiri dengan kode fetching data. Ia hanya perlu peduli "menggunakan" data yang sudah tersedia dari useFetch.

Contoh Penggunaan (secara konseptual):

// Di dalam komponen kamu...
import useFetch from './hooks/useFetch'; // Anggaplah kamu punya file useFetch.js ini

function UserProfile() {
  const { data: user, isLoading, error } = useFetch('<https://api.example.com/users/123>');

  if (isLoading) return <p>Memuat profil pengguna...</p>;
  if (error) return <p>Terjadi kesalahan: {error.message}</p>;
  if (!user) return null; // Jika data masih kosong

  return (
    <div>
      <h2>Profil {user.name}</h2>
      <p>Email: {user.email}</p>
      {/* Tampilkan data lainnya */}
    </div>
  );
}

Lihat? Betapa rapinya! Komponen UserProfile tidak perlu tahu detail teknis bagaimana data diambil; ia hanya menerima user, isLoading, dan error dari useFetch.

2. useLocalStorage (Menyimpan Data di Browser)

Pernah dengar tentang Local Storage di browser? Ini adalah tempat di mana website bisa menyimpan sejumlah kecil data langsung di komputer kamu. Data ini akan tetap ada meskipun kamu menutup browser atau mematikan komputer. Contoh penggunaannya adalah untuk menyimpan preferensi tema (gelap/terang), token autentikasi (agar kamu tetap login), atau data keranjang belanja sementara.

Menggunakan localStorage secara langsung (dengan localStorage.getItem() dan localStorage.setItem()) memang mudah, tapi bagaimana kalau kamu ingin nilai yang disimpan di localStorage itu bisa otomatis memperbarui tampilan di komponen Reactmu? Atau bagaimana kalau kamu ingin ada nilai default jika data belum ada di localStorage?

Bagaimana useLocalStorage bekerja?

Custom Hook useLocalStorage akan mengemas interaksi dengan localStorage. Ia akan menggunakan useState untuk menjaga state dari nilai yang tersimpan, dan useEffect untuk:

  • Mengambil nilai dari localStorage saat komponen pertama kali dimuat.
  • Menyimpan nilai ke localStorage setiap kali state di komponen berubah.

Manfaatnya sangat praktis:

  • Interaksi otomatis. Kamu tidak perlu lagi secara manual memanggil localStorage.getItem() atau localStorage.setItem(). Cukup gunakan Custom Hook-nya, dan ia akan menangani semuanya.
  • Reaktif terhadap perubahan. Ketika nilai di localStorage berubah melalui Custom Hook ini, komponen yang menggunakannya akan otomatis diperbarui.
  • Menangani nilai default dan parsing data (misal: JSON). Seringkali data di localStorage disimpan sebagai string. Custom Hook ini bisa otomatis mengubahnya ke format yang kamu inginkan (misalnya objek JSON) saat diambil, dan mengubahnya kembali menjadi string saat disimpan.

Contoh Penggunaan:

// Di dalam komponen kamu...
import useLocalStorage from './hooks/useLocalStorage'; // Anggaplah kamu punya file useLocalStorage.js ini

function ThemeSwitcher() {
  // Simpan preferensi tema di localStorage. Defaultnya 'light'
  const [theme, setTheme] = useLocalStorage('app-theme', 'light');

  const toggleTheme = () => {
    setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
  };

  return (
    <div style={{ background: theme === 'dark' ? '#333' : '#FFF', color: theme === 'dark' ? '#FFF' : '#333', padding: '20px' }}>
      <p>Tema Aplikasi: {theme}</p>
      <button onClick={toggleTheme}>Ganti Tema</button>
    </div>
  );
}

Dengan useLocalStorage, kamu bisa dengan mudah menyimpan dan mengambil preferensi pengguna tanpa repot.

3. useForm (Mengelola Input Form)

Formulir (form) adalah bagian tak terpisahkan dari hampir setiap aplikasi web. Mengelola input pengguna, menangani perubahan nilai, dan melakukan validasi bisa jadi pekerjaan yang berulang dan melelahkan. Bayangkan kalau kamu punya 10 input di satu form, kamu perlu 10 useState terpisah, ditambah logika validasi untuk masing-masing input. Pusing, kan?

Bagaimana useForm bekerja?

Sebuah Custom Hook useForm akan mengemas semua logika yang berhubungan dengan formulir. Ia bisa:

  • Menyimpan nilai semua input formulir dalam satu state objek.
  • Menyediakan fungsi handler untuk perubahan input (onChange).
  • Mengelola state kesalahan validasi untuk setiap input.
  • Menyediakan fungsi untuk menangani submit formulir.

Manfaatnya sangat signifikan:

  • Kode form jadi jauh lebih rapi dan ringkas. Kamu tidak perlu lagi menulis useState dan onChange handler untuk setiap input.
  • Validasi terpusat dan reusable. Logika validasi bisa ditempatkan di dalam useForm dan digunakan kembali di berbagai formulir.
  • Pengelolaan state yang efisien. Semua nilai input dikelola dalam satu objek state, memudahkan kamu mengaksesnya saat submit.

Contoh Penggunaan (secara konseptual):

// Di dalam komponen kamu...
import useForm from './hooks/useForm'; // Anggaplah kamu punya file useForm.js ini

const validateLoginForm = (values) => { // Ini fungsi validasi sederhana
  const errors = {};
  if (!values.email) {
    errors.email = 'Email wajib diisi';
  } else if (!/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/.test(values.email)) {
    errors.email = 'Format email tidak valid';
  }
  if (!values.password) {
    errors.password = 'Password wajib diisi';
  } else if (values.password.length < 6) {
    errors.password = 'Password minimal 6 karakter';
  }
  return errors;
};

function LoginForm() {
  const { values, errors, handleChange, handleSubmit } = useForm(
    { email: '', password: '' }, // Nilai awal form
    validateLoginForm // Fungsi validasi
  );

  const onSubmit = () => {
    alert(`Login berhasil dengan Email: ${values.email}`);
    // Kirim data ke server
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={values.email}
          onChange={handleChange}
        />
        {errors.email && <p style={{ color: 'red' }}>{errors.email}</p>}
      </div>
      <div>
        <label>Password:</label>
        <input
          type="password"
          name="password"
          value={values.password}
          onChange={handleChange}
        />
        {errors.password && <p style={{ color: 'red' }}>{errors.password}</p>}
      </div>
      <button type="submit">Login</button>
    </form>
  );
}

Dengan useForm, kamu bisa membuat formulir yang kompleks dengan mudah, tanpa perlu menulis ulang banyak kode pengelolaan state dan validasi.

Dengan melihat contoh-contoh ini, kamu bisa bayangkan betapa besar potensi Custom Hook dalam membuat kode React-mu lebih bersih, terstruktur, dan sangat mudah digunakan kembali. Ini adalah salah satu kunci untuk menjadi pengembang React yang efisien dan produktif. Yuk membuat proyek Reactmu lebih rapi dengan Custom Hook.

Studi Kasus & Sumber Belajar Terpercaya ( BuildWithAngga )

BuildWiithAngga Platform Belajar Online

Bila kamu mau belajar lebih dalam dan lebih lanjut lagi aku saranin mengikuti kelas dari BuildWithAngga. BuildWithAngga punya pendekatan pembelajaran yang cukup beda dibanding platform belajar coding lainnya, terutama buat pemula dan orang yang suka belajar visual. Berikut beberapa hal yang bikin mereka menonjol:

⭐ Belajar dari Real Project, Bukan Teori Doang

Di BuildWithAngga, kamu gak cuma belajar sintaks, tapi langsung bikin project nyata kayak:

  • Website portfolio modern
  • Aplikasi booking seperti Tokopedia Travel
  • Landing page profesional
  • UI design pakai Figma

➡️ Jadi kamu langsung lihat hasilnya, bukan cuma hafalin kode.

⭐ Visual Interaktif & UI Keren

Mereka bener-bener fokus ke desain antarmuka yang kece:

  • Kelas banyak yang berfokus pada Frontend (HTML, CSS, Tailwind, React)
  • Desainnya modern dan sesuai tren industri
  • Belajar coding sekaligus belajar taste desain

Cocok banget buat kamu yang pengin kerja sebagai UI/UX Developer.

⭐ Materi Up-to-date & Fokus ke Industri

BuildWithAngga ngikutin tren teknologi terbaru:

  • Tailwind CSS, Next.js, Laravel 10
  • Vercel deployment, GitHub versioning
  • Animasi interaktif, Responsive Web Design

➡️ Gak belajar hal yang "jadul" dan kurang relevan.

⭐ Penjelasan Simpel, Bahasa Indonesia

Semua materi pakai bahasa Indonesia dengan gaya yang santai, receh tapi dalam, cocok banget buat kamu yang bosen dengan pembelajaran kaku dan textbook.

➡️ Gak bikin stres dan lebih mudah dipahami, terutama buat pemula.

⭐ Mentoring & Sertifikat Karier

  • Bisa dapet sertifikat resmi
  • Ada career mentoring buat bantu kamu masuk dunia kerja
  • Kelas premium biasanya dilengkapi dengan review dari mentor

➡️ Jadi bukan sekadar belajar, tapi juga disiapkan untuk kerja.

Kalau kamu suka gaya belajar yang langsung "terjun ke lapangan", visual menarik, dan gampang dipahami, BuildWithAngga jelas beda dan cocok untuk kamu yang mau serius masuk dunia kreatif & digital.

Kesimpulan: Custom Hook, Pembantu Setia untuk Kode React yang Bersih dan Efisien

penutup

Kita sudah sampai di penghujung perjalanan memahami Custom Hook! Dari awal kita membahas masalah-masalah yang sering muncul di React seperti duplikasi kode dan komponen yang jadi "gemuk", hingga kita membuat sendiri Custom Hook sederhana seperti useCounter dan melihat contoh-contoh Custom Hook populer lainnya.

<aside> 💡

Apa yang bisa kita tarik sebagai benang merah dari semua pembahasan ini?

</aside>

⭐ Rangkuman Manfaat Utama Custom Hook

Custom Hook bukanlah sekadar fitur baru di React, tapi sebuah pola yang sangat powerful yang bisa mengubah cara kamu menulis aplikasi. Berikut adalah rangkuman manfaat utamanya:

  • Reusabilitas: Kode Bisa Dipakai Berulang Kali Ini adalah inti dari Custom Hook. Bayangkan kamu punya sebuah "alat" yang kamu kembangkan sendiri. Alih-alih membuat alat yang sama dari awal setiap kali kamu butuh, kamu cukup memakai alat yang sudah jadi itu berulang kali. useCounter yang kita buat tadi adalah contoh nyatanya. Kamu bisa pakai logika penghitung itu di mana saja: untuk jumlah produk, skor game, atau bahkan countdown waktu. Kamu tulis kodenya sekali, tapi manfaatnya bisa kamu rasakan di banyak tempat. Ini menghemat waktu dan tenaga kamu secara signifikan!
  • Keterbacaan: Komponen Jadi Lebih Bersih dan Mudah Dipahami Dulu, komponen React bisa jadi sangat panjang dan padat dengan berbagai useState, useEffect, dan fungsi-fungsi lain yang mengelola logika di dalamnya. Ini membuat komponen jadi sulit dibaca dan dipahami, terutama bagi orang lain (atau bahkan kamu sendiri di masa depan!). Dengan Custom Hook, kamu bisa "memindahkan" logika-logika kompleks itu ke dalam fungsi Custom Hook yang terpisah. Hasilnya? Komponen React-mu jadi jauh lebih fokus pada apa yang seharusnya ia lakukan: yaitu menampilkan User Interface (UI). Ia tidak perlu lagi pusing memikirkan bagaimana data diambil (useFetch), bagaimana input form divalidasi (useForm), atau bagaimana hitungan dikelola (useCounter). Komponenmu jadi ringkas, to the point, dan gampang dipahami.
  • Maintenance Lebih Mudah: Perubahan Logika Cukup di Satu Tempat Ini adalah salah satu manfaat yang mungkin paling berharga dalam jangka panjang. Bayangkan skenario useFetch yang tadi kita bahas. Jika suatu hari kamu perlu mengubah cara aplikasi mengambil data dari API (misalnya, ada perubahan di header autentikasi atau penanganan kesalahan), kamu tidak perlu mencari dan mengubahnya di setiap komponen yang melakukan fetch. Cukup ubah kodenya di satu tempat: file useFetch.js milikmu. Semua komponen yang menggunakan useFetch akan otomatis mendapatkan pembaruan tersebut. Ini mengurangi risiko bug, mempercepat proses debugging, dan membuat proyekmu lebih mudah untuk dikembangkan di masa depan.

⭐ Dorongan untuk Eksplorasi Lebih Lanjut

Selamat! Kamu sudah punya pemahaman yang kuat tentang Custom Hook. Dari sini, pintu-pintu kesempatan untuk membuat aplikasi React yang lebih canggih dan terstruktur akan terbuka lebar untukmu. Jangan hanya berhenti di teori!

Tantang dirimu untuk mencoba membuat Custom Hook sendiri. Mulailah dengan masalah kecil yang sering kamu temui dalam koding. Mungkin kamu sering perlu menunda eksekusi sebuah fungsi (useDebounce), atau mungkin kamu sering berinteraksi dengan ukuran jendela browser (useWindowSize). Coba identifikasi logika yang berulang, lalu bungkuslah menjadi Custom Hook. Percayalah, ini akan jadi latihan yang sangat berharga untuk meningkatkan kemampuan React-mu.

⭐ Sumber Daya Tambahan

Untuk terus memperdalam pengetahuanmu tentang React dan Custom Hook, ada beberapa sumber daya yang sangat direkomendasikan:

  • Dokumentasi Resmi React: Ini adalah sumber informasi terbaik dan paling terpercaya. Selalu kunjungi https://react.dev/ untuk mendapatkan informasi terbaru, panduan lengkap, dan contoh-contoh kode yang akurat. Bagian tentang "Hooks" dan "Building Your Own Hooks" adalah tempat yang tepat untuk kamu jelajahi lebih lanjut.
  • Blog dan Tutorial Online: Ada banyak sekali blog dan platform tutorial (seperti https://buildwithangga.com/tips , Scotch.io, Medium, atau Dev.to) yang menyediakan artikel dan contoh praktis tentang Custom Hook. Cari dengan kata kunci "React custom hooks tutorial" atau "best React custom hooks".
  • Video Tutorial: Jika kamu lebih suka belajar melalui video, buildwithangga.com punya segudang channel yang membahas React dan Custom Hook secara mendalam.

Dengan Custom Hook, kamu tidak hanya akan menulis kode yang lebih efisien, tapi juga akan menjadi pengembang React yang lebih cerdas dan produktif. Jadi, jangan ragu untuk mulai bereksperimen dan rasakan sendiri manfaatnya!