React - Kekuatan Custom Hooks (Kode Lebih Rapi)

Halo semuanya! 👋

Pernah gak sih kalian merasa bersalah karena sering Copy-Paste Codingan?

Misalnya, kalian bikin fitur fetch data di satu komponen. Terus, komponen lain butuh fitur yang sama. Langsung deh, blok kode di-copy, terus di-paste. Beres kan?

Masalahnya muncul pas ada bug. Kalian benerin di satu tempat, eh tempat lain lupa dibenerin. Pusing deh. 😫

Nah, solusinya adalah Custom Hooks.

Ini adalah senjata rahasia biar kodingan React kalian tetap bersih, rapi, dan tentu saja DRY (Don’t Repeat Yourself).

Masalah: Logika yang Berulang

Bayangkan kita punya dua komponen. Dua-duanya butuh tahu lebar layar (window width) buat bikin layout responsif.

Ini kode di Component A:

import { useState, useEffect } from "react";

const ComponentA = () => {
  const [windowSize, setWindowSize] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWindowSize(window.innerWidth);
    window.addEventListener("resize", handleResize);

    // Cleanup biar gak memori bocor
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return <div>Lebar layar: {windowSize}</div>;
};

Kalau Component B butuh fitur yang sama, kalian bakal copy-paste semua kode useState dan useEffect itu kan?

Ribet banget cuma buat dapet satu angka doang!

Solusi: Custom Hooks

Custom Hook sebenernya cuma fungsi JavaScript biasa. Aturannya cuma satu: Namanya harus diawali dengan “use”.

Yuk, kita pindahin logika window resize tadi ke file baru useWindowSize.

// hooks/useWindowSize.js
import { useState, useEffect } from "react";

export const useWindowSize = () => {
  // 1. Pindahin aja logikanya ke sini!
  const [windowSize, setWindowSize] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWindowSize(window.innerWidth);
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  // 2. Return apa yang komponen butuhkan
  return windowSize;
};

Simpel kan? Cuma fungsi yang manggil hooks lain.

Hasilnya: Komponen Jadi Kinclong ✨

Sekarang, kita tulis ulang Component A pake kekuatan baru ini.

import { useWindowSize } from "./hooks/useWindowSize";

const ComponentA = () => {
  // Lihat deh, jadi bersih banget!
  const width = useWindowSize();

  return <div>Lebar layar: {width}</div>;
};

Terus Component B gimana?

import { useWindowSize } from "./hooks/useWindowSize";

const ComponentB = () => {
  const width = useWindowSize();

  return (
    <div style={{ backgroundColor: width > 768 ? "green" : "red" }}>
      Background Responsif!
    </div>
  );
};

Kenapa ini Keren?

1. Mudah Dibaca: Komponen kalian fokus buat nampilin UI, bukan mikirin logika yang ribet.
2. Bisa Dipakai Ulang: Tulis sekali, pakai di mana aja.
3. Gampang Diurus: Kalau mau ganti logika resize-nya (misalnya ditambah debounce), cukup ganti di satu file aja.

Penutup

Custom Hooks itu bukan fitur serem buat “pro” doang. Itu cuma cara biar kode kalian lebih terorganisir.

Jadi, kalau besok-besok kalian mau copy-paste useEffect atau useState, coba berhenti sebentar dan tanya: “Bisa gak ya ini dibikin jadi hook?”

Diri kalian di masa depan (dan temen setim kalian) bakal berterima kasih.

Selamat Koding! 🚀