Custom Hook — CompileDaily Study

Penjelasan

Custom hook adalah fungsi JavaScript biasa yang namanya diawali use dan BOLEH memanggil hook bawaan React (useState, useEffect, dst) di dalamnya — dipakai untuk mengekstrak logika stateful yang berulang di beberapa komponen jadi satu fungsi yang bisa dipakai ulang, tanpa duplikasi kode.

Contoh Konsep

import { useState, useEffect } from 'react';

function useLebar() {
    const [lebar, setLebar] = useState(window.innerWidth);

    useEffect(() => {
        function handleResize() {
            setLebar(window.innerWidth);
        }
        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize); // cleanup
    }, []);

    return lebar;
}

function App() {
    const lebar = useLebar();
    return <p>Lebar layar: {lebar}px</p>;
}

Praktikum

Buat custom hook useCounter(nilaiAwal) yang mengembalikan [jumlah, tambah, kurangi] — jumlah dari useState, tambah dan kurangi adalah fungsi untuk menambah/mengurangi nilainya. Pakai hook itu di komponen App.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Nama custom hook WAJIB diawali use (mis. useCounter, bukan counter atau getCounter) — ini bukan cuma konvensi, React dan ESLint plugin resminya (eslint-plugin-react-hooks) memakai penamaan ini untuk mendeteksi pelanggaran aturan hooks, mis. hook dipanggil di dalam kondisi/loop.