Custom Hooks: Bikin Hook Sendiri Kayak Chef Bikin Resep!

ReactJS

membangun antarmuka pengguna yang interaktif dan dinamis dengan pendekatan berbasis komponen

 

Terkadang kita punya logika yang dipakai berulang-ulang di berbagai komponen. Daripada copy-paste terus, lebih baik kita bikin Custom Hook sendiri!

Misalnya, kita ingin membuat hook untuk menangani state lokal dengan nilai yang disimpan di localStorage.

import { useState, useEffect } from "react";

const useLocalStorage = (key, initialValue) => {
  const [storedValue, setStoredValue] = useState(() => {
    const item = localStorage.getItem(key);
    return item ? JSON.parse(item) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(storedValue));
  }, [key, storedValue]);

  return [storedValue, setStoredValue];
};

const App = () => {
  const [name, setName] = useLocalStorage("name", "");

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <p>Halo, {name}!</p>
    </div>
  );
};

Kenapa Pakai Custom Hook?

Kode jadi lebih bersih → Daripada tulis ulang logika yang sama di banyak tempat, lebih baik dibuat satu hook.  Lebih reusable → Bisa dipakai di berbagai komponen tanpa harus copas kode.  Lebih terorganisir → Semua logika terkait ada di satu tempat.

Kesimpulan

 useState → Untuk menyimpan dan mengubah state.  useEffect → Untuk menjalankan efek samping seperti fetching data.  useMemo → Untuk mengoptimalkan perhitungan agar tidak dieksekusi berulang kali.  useRef → Untuk menyimpan referensi ke elemen DOM atau nilai yang ingin dipertahankan tanpa re-render.  useContext → Untuk berbagi data antar komponen tanpa harus meneruskan props secara manual.  Custom Hooks → Untuk membuat hook sendiri agar kode lebih bersih dan reusable.