React Hooks: Semua Hook Dijelaskan dengan Contoh Langsung

React hooks adalah fungsi yang namanya diawali use, yang memungkinkan function component memakai fitur React: useState untuk mengingat sebuah nilai, useEffect untuk menjalankan kode setelah render, useRef untuk memegang node DOM, useContext untuk membaca data bersama. Kamu memanggilnya di bagian atas komponen, dan React menyimpan nilainya di antara render.

import { useState, useEffect, useRef, useMemo } from 'react';

const FRUITS = ['apple', 'banana', 'cherry', 'grape', 'mango', 'pear'];

export default function App() {
    const [query, setQuery] = useState('');
    const inputRef = useRef(null);

    const matches = useMemo(
        () => FRUITS.filter((f) => f.includes(query.toLowerCase())),
        [query]
    );

    useEffect(() => {
        console.log(`effect: ${matches.length} matches for "${query}"`);
    }, [query, matches.length]);

    return (
        <div>
            <input
                ref={inputRef}
                value={query}
                onChange={(e) => setQuery(e.target.value)}
                placeholder="Filter fruit"
            />
            <button onClick={() => inputRef.current.focus()}>Focus</button>
            <ul>
                {matches.map((f) => (
                    <li key={f}>{f}</li>
                ))}
            </ul>
        </div>
    );
}

Empat hook bekerja sama di sini. useState menyimpan teksnya, useRef menunjuk ke input agar tombol bisa memberinya fokus, useMemo menyimpan list hasil filter sampai query berubah, dan useEffect mencatat log setelah setiap render yang mengubah query. Ketik an dan perhatikan Konsol: satu baris per ketukan tombol, setelah list diperbarui.

Kenapa hook ada

Sebelum React 16.8, komponen yang butuh state atau kode lifecycle harus berupa class. Logika untuk satu fitur terpecah di componentDidMount, componentDidUpdate, dan componentWillUnmount, dan berbagi logika itu antarkomponen berarti memakai mixin (yang tidak pernah berjalan dengan sintaks class), higher order component, atau render prop, yang semuanya membungkus tree-mu dengan lapisan tambahan.

// The class way: one feature, three methods
class Clock extends React.Component {
    state = { now: new Date() };
    componentDidMount() {
        this.id = setInterval(() => this.setState({ now: new Date() }), 1000);
    }
    componentWillUnmount() {
        clearInterval(this.id);
    }
    render() {
        return <p>{this.state.now.toLocaleTimeString()}</p>;
    }
}

Dengan hook, fitur yang sama berada di satu tempat: effect memulai timer dan cleanup-nya menghentikannya.

import { useState, useEffect } from 'react';

function Clock() {
    const [now, setNow] = useState(new Date());

    useEffect(() => {
        console.log('timer started');
        const id = setInterval(() => setNow(new Date()), 1000);
        return () => {
            clearInterval(id);
            console.log('timer stopped');
        };
    }, []);

    return <p>{now.toLocaleTimeString()}</p>;
}

export default function App() {
    const [show, setShow] = useState(true);
    return (
        <div>
            <button onClick={() => setShow(!show)}>{show ? 'Hide' : 'Show'} clock</button>
            {show && <Clock />}
        </div>
    );
}

Sembunyikan jam itu, dan Konsol mencetak timer stopped: React menjalankan cleanup saat Clock meninggalkan layar. Tampilkan lagi, dan timer baru dimulai. Class component masih berjalan di React 19, tetapi kode baru memakai hook.

Semua hook bawaan

React 19.2 mengelompokkan hook-nya berdasarkan apa yang diberikannya kepada komponen. Kamu akan memakai dua kelompok pertama setiap hari, dan sisanya saat ada masalah tertentu yang membutuhkannya.

use, useActionState, useOptimistic, dan useFormStatus hadir bersama React 19, dan useEffectEvent menjadi stabil di 19.2. Semua hook lain di daftar ini juga berjalan di React 18.

State memicu render, ref tidak

Tidak setiap hook memicu render. useState dan useReducer memicunya: ubah nilainya, dan React menggambar komponen itu lagi. useRef memberimu objek yang field current-nya bisa kamu ubah dengan bebas, dan React tidak pernah merender ulang karenanya. Karena itu, ref adalah tempat yang tepat untuk id timer, nilai sebelumnya, atau hitungan yang tidak ditampilkan di layar.

import { useState, useRef, useReducer, useEffect } from 'react';

function reducer(state, action) {
    if (action === 'add') return { items: state.items + 1 };
    if (action === 'clear') return { items: 0 };
    return state;
}

export default function App() {
    const [cart, dispatch] = useReducer(reducer, { items: 0 });
    const [note, setNote] = useState('');
    const commits = useRef(0);

    useEffect(() => {
        commits.current += 1;
        console.log(`render #${commits.current} reached the screen`);
    });

    return (
        <div>
            <p>Items in cart: {cart.items}</p>
            <button onClick={() => dispatch('add')}>Add item</button>
            <button onClick={() => dispatch('clear')}>Clear</button>
            <p>
                <input value={note} onChange={(e) => setNote(e.target.value)} placeholder="Note" />
            </p>
        </div>
    );
}

useReducer menyimpan keranjang dan useState menyimpan catatan; keduanya memicu render saat berubah, dan effect mencatat satu baris per render. Effect juga mengubah commits.current, tetapi perubahan itu tidak pernah memicu render sendiri, jadi log-nya tidak berputar tanpa henti. Hitungannya diperbarui di effect, bukan di isi komponen, karena isi komponen tidak boleh mengubah apa pun selama merender.

Aturan hook

Setiap hook mengikuti dua aturan:

1. Panggil hook di level teratas komponenmu, jangan pernah di dalam kondisi, loop, atau fungsi bersarang.
2. Panggil hook hanya dari function component atau dari custom hook buatanmu sendiri.

React tidak mengenali hook berdasarkan namanya. React mengenalinya berdasarkan urutan pemanggilannya, dan mengharapkan urutan itu sama di setiap render. Hook di dalam if akan menggeser setiap hook setelahnya. Halaman aturan hook menunjukkan apa yang rusak dan cara memperbaikinya. use adalah satu-satunya pengecualian: ia boleh dipanggil di dalam kondisi.

Custom hook pertamamu

Saat dua komponen butuh logika yang sama yang punya state, pindahkan logika itu ke fungsi yang namanya diawali use. Fungsi itu boleh memanggil hook lain mana pun. Setiap komponen yang memanggilnya mendapat state sendiri.

import { useState } from 'react';

function useCounter(start, step) {
    const [count, setCount] = useState(start);
    const increment = () => setCount((c) => c + step);
    const reset = () => setCount(start);
    return { count, increment, reset };
}

function Counter({ label, start, step }) {
    const { count, increment, reset } = useCounter(start, step);
    return (
        <p>
            {label}: {count}{' '}
            <button onClick={increment}>+{step}</button>{' '}
            <button onClick={reset}>Reset</button>
        </p>
    );
}

export default function App() {
    return (
        <div>
            <Counter label="Apples" start={0} step={1} />
            <Counter label="Points" start={100} step={10} />
        </div>
    );
}

Kedua counter menjalankan hook yang sama, tetapi mengklik yang satu tidak memengaruhi yang lain: custom hook berbagi logika, bukan state. Tambahkan fungsi decrement ke useCounter dan tombol yang memanggilnya, dan kedua counter langsung mendapatkannya. Pola lainnya (useToggle, useDebounce, useLocalStorage) ada di halaman custom hook.

Hook mana yang dipakai

• Layar harus berubah saat sebuah nilai berubah: useState, atau useReducer saat banyak event memperbarui state yang sama.
• Kamu perlu berinteraksi dengan sesuatu di luar React (timer, subscription, request): useEffect.
• Kamu butuh node DOM atau nilai yang tidak ditampilkan di layar: useRef.
• Banyak komponen jauh di dalam tree butuh nilai yang sama: useContext.
• Render terasa lambat karena satu perhitungan atau karena child yang memakai memo ikut dirender ulang: useMemo dan useCallback. React Compiler bisa menambahkan memoization ini untukmu, tetapi menulisnya secara manual tetap berjalan dan masih umum.
• Mengetik terasa lambat karena update di baliknya berat: useTransition atau useDeferredValue.