• Apa Itu Custom Hooks?
• Langkah 1 - Membuat Custom Hook Sederhana
• Langkah 2 - Menggunakan Custom Hook
• Langkah 3 - Custom Hook dengan State Lebih Kompleks
• Kesimpulan

Halo teman-teman semuanya, pada artikel sebelumnya kita sudah belajar tentang Context API, bagaimana cara berbagi data antar component tanpa harus melakukan props drilling.

Pada artikel kali ini, kita akan membahas tentang Custom Hooks, yaitu bagaimana kita bisa membuat hook buatan sendiri untuk menyederhanakan logika yang berulang agar bisa digunakan kembali di banyak component.

Apa Itu Custom Hooks?

Custom Hook adalah fungsi JavaScript biasa yang menggunakan hook React (seperti useState, useEffect, useRef, dll), dan namanya selalu diawali dengan kata use.

Tujuan custom hook adalah untuk mengabstraksi logika yang sering dipakai berulang, supaya lebih rapi dan bisa digunakan di berbagai component.

Langkah 1 - Membuat Custom Hook Sederhana

Mari kita buat custom hook untuk melacak lebar jendela (window width). Silahkan teman-teman buat file useWindowWidth.js di folder src/hooks:

import { useState, useEffect } from "react";

function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);

    window.addEventListener("resize", handleResize);

    // cleanup saat component di-unmount
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return width;
}

export default useWindowWidth;

Penjelasan:

• Hook useWindowWidth menyimpan state width.
• Saat ukuran jendela berubah, state diperbarui.
• Hook mengembalikan nilai width agar bisa dipakai di component lain.

Langkah 2 - Menggunakan Custom Hook

Sekarang mari kita gunakan custom hook useWindowWidth di dalam component App.

import useWindowWidth from "./hooks/useWindowWidth";

function App() {
  const width = useWindowWidth();

  return (
    <div>
      <h1>Lebar Jendela: {width}px</h1>
    </div>
  );
}

export default App;

Penjelasan:

• Kita panggil useWindowWidth() seperti hook bawaan.
• Hook tersebut mengembalikan lebar jendela saat ini.
• UI otomatis ter-update ketika jendela di-resize.

Langkah 3 - Custom Hook dengan State Lebih Kompleks

Custom hook juga bisa mengelola logika form agar tidak ditulis berulang. Silahkan teman-teman buat file useForm.js di folder src/hooks:

import { useState } from "react";

function useForm(initialValues) {
  const [values, setValues] = useState(initialValues);

  const handleChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };

  const resetForm = () => {
    setValues(initialValues);
  };

  return { values, handleChange, resetForm };
}

export default useForm;

Menggunakan hook ini di App.jsx:

import useForm from "./hooks/useForm";

function App() {
  const { values, handleChange, resetForm } = useForm({
    email: "",
    password: "",
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    alert(`Email: ${values.email}, Password: ${values.password}`);
    resetForm();
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        value={values.email}
        onChange={handleChange}
        placeholder="Email"
      />
      <input
        type="password"
        name="password"
        value={values.password}
        onChange={handleChange}
        placeholder="Password"
      />
      <button type="submit">Login</button>
    </form>
  );
}

export default App;

Penjelasan:

• useForm menyimpan state untuk input form.
• handleChange mengupdate nilai form sesuai input.
• resetForm mengembalikan nilai ke kondisi awal.

Kesimpulan

Pada artikel ini, kita sudah belajar tentang Custom Hooks. Dengan custom hook, kita bisa membuat logika yang bisa digunakan kembali di banyak component, sehingga kode lebih bersih, terstruktur, dan mudah dikelola.

Kita sudah mencoba membuat custom hook sederhana (useWindowWidth) dan custom hook form (useForm).

Terima kasih