useCallback — konsep kunci, hook memoization fungsi di React

Apa itu useCallback di React

useCallback — adalah hook yang ditambahkan di React 16.8 yang mememoize fungsi: mengembalikan referensi yang sama selama dependensi tidak berubah. Tanpa useCallback, setiap deklarasi fungsi di dalam komponen membuat objek fungsi baru setiap render. Untuk primitif hal ini tidak terlihat, tetapi saat mengirim callback semacam itu ke komponen anak yang dioptimalkan melalui React.memo, setiap referensi baru menyebabkan re-render komponen anak.

Secara sintaksis, useCallback setara dengan useMemo untuk fungsi: useCallback(fn, deps) — adalah singkatan dari useMemo(() => fn, deps). React menyimpan fungsi yang dimemoize di penyimpanan internal node fiber dan membandingkan dependensi setiap render. Jika dependensi tidak berubah (Object.is untuk setiap elemen), fungsi sebelumnya dikembalikan.

Menurut React Documentation — useCallback (2025), tidak perlu membungkus setiap fungsi dengan useCallback. Hook ini memiliki harga sendiri: pemanggilan hook, perbandingan dependensi, dan alokasi memori untuk array dependensi. Jika komponen sederhana dan tidak memiliki pohon yang dalam dengan React.memo — useCallback hanya akan memperlambat aplikasi. Optimasi harus terukur, bukan intuitif.

import { useCallback } from 'react';

function Parent() {
    const [count, setCount] = useState(0);

    // Referensi stabil — fungsi yang sama sampai deps berubah
    const handleClick = useCallback(() => {
        setCount(prev => prev + 1);
    }, []);

    return <Child onClick={handleClick} />;
}

Bagaimana cara kerja memoization fungsi

Memoization di useCallback didasarkan pada cache hasil pemanggilan fungsi. React menyimpan closure yang dibuat pada render pertama dan mengembalikannya pada render berikutnya selama dependensi tetap tidak berubah. Di dalam node fiber, setiap pemanggilan useCallback membuat node dalam daftar tertaut hook, tempat dependensi sebelumnya dan nilai yang dimemoize disimpan.

Proses perbandingan dependensi dilakukan secara ketat melalui Object.is — ini perbandingan dangkal, tanpa pemeriksaan mendalam pada objek atau array. Jika ada objek atau array di dependensi, referensi baru setiap render akan dianggap sebagai perubahan. Oleh karena itu, di array dependensi perlu mengirim nilai primitif atau referensi stabil (misalnya dari useRef atau useMemo).

Menurut React Core Team — Optimization Guide (2024), biaya memoization mencakup tiga komponen: alokasi array dependensi setiap render, perulangan dan perbandingan elemen melalui Object.is, serta overhead potensial dari garbage collection saat pembuatan ulang. Untuk komponen dengan ratusan pembungkus useCallback ini bisa menjadi nyata — oleh karena itu selektivitas dalam penggunaan hook sangat penting.

useCallback dan kinerja

Ada mitos yang tersebar luas bahwa useCallback secara otomatis meningkatkan kinerja. Sebenarnya, dalam isolasi (tanpa React.memo) useCallback bahkan sedikit memperlambat aplikasi karena biaya perbandingan dependensi. Hook ini memberikan manfaat nyata hanya dalam tiga skenario: mencegah re-render komponen React.memo, stabilitas callback di useEffect, dan pengiriman ke custom hook yang bergantung pada reference equality.

Aturannya sederhana: selama kamu belum menemukan masalah kinerja melalui React DevTools Profiler — jangan gunakan useCallback. Tim React telah berulang kali menekankan bahwa optimasi prematur adalah akar kejahatan. Pertama tulis kode bersih tanpa memoization, ukur, temukan bottleneck di profiler, dan baru kemudian tambahkan useCallback di tempat yang benar-benar diperlukan.

// Optimasi terukur: Child dibungkus dengan React.memo
const Child = React.memo(({ onClick }) => {
    console.log('Child re-render');
    return <button onClick={onClick}>Click</button>;
});

function Parent() {
    const handleClick = useCallback(() => {
        console.log('diklik');
    }, []);
    return <Child onClick={handleClick} />;
}

Menurut Dan Abramov — Before You memo() (2024), lebih dari 90% kasus penggunaan useCallback di proyek open-source berlebihan. Pengembang membungkus setiap fungsi "untuk berjaga-jaga", tanpa mengukur efeknya. Alternatif: jika komponen anak berat dan re-rendernya mahal — React.memo + useCallback dibenarkan. Jika komponen anak ringan — re-render lebih murah daripada perbandingan dependensi.

Kapan menggunakan useCallback

Skenario pertama — React.memo. Jika komponen anak dibungkus dengan React.memo dan menerima fungsi callback sebagai prop, tanpa useCallback komponen anak akan digambar ulang setiap render induk, bahkan jika datanya sendiri tidak berubah. useCallback menstabilkan referensi, dan React.memo dapat melewati re-render dengan benar.

Skenario kedua — useEffect dengan callback di dependensi. Jika fungsi dikirim ke array dependensi useEffect, setiap referensi baru akan menjalankan ulang efek. useCallback menjamin referensi stabil, dan efek hanya dijalankan saat data nyata berubah, bukan setiap render. Ini sangat penting untuk subscription dan permintaan.

• React.memo children — mencegah re-render komponen anak yang dimemoize saat mengirim callback.
• useEffect dependencies — menstabilkan fungsi di array dependensi efek, mencegah eksekusi ulang yang berlebihan.
• Custom hook — jika hook menerima callback dan bergantung pada reference equality-nya, useCallback wajib digunakan.
• Context value — jika fungsi dikirim di value konteks, useMemo dengan useCallback menstabilkan referensi.

// useCallback untuk dependensi useEffect yang stabil
const fetchData = useCallback(async (id) => {
    const res = await fetch(`/api/${id}`);
    setData(res.data);
}, []); // referensi stabil, tidak pernah dibuat ulang

useEffect(() => {
    fetchData(props.id);
}, [props.id, fetchData]); // efek berjalan hanya saat props.id berubah

useCallback vs useMemo

Perbedaan utama antara useCallback dan useMemo terletak pada apa yang masing-masing memoize. useCallback mememoize fungsi: useCallback(fn, deps) mengembalikan fn (versi yang sama atau sebelumnya). useMemo mememoize hasil pemanggilan fungsi: useMemo(() => computeExpensive(a, b), [a, b]) mengembalikan nilai yang dihitung, bukan fungsi.

Secara teknis, useCallback adalah gula sintaksis di atas useMemo: useCallback(fn, deps) setara dengan useMemo(() => fn, deps). Sintaks ini ada hanya untuk keterbacaan — agar pengembang melihat dengan jelas bahwa yang dimemoize adalah fungsi, bukan nilai. Tidak ada perbedaan kinerja antara useCallback dan useMemo dengan fungsi — keduanya menghasilkan kode yang sama.

// Ini setara:
const handleClick = useCallback(() => doSomething(a, b), [a, b]);
const handleClick = useMemo(() => () => doSomething(a, b), [a, b]);

Kesalahan umum dengan useCallback

Kesalahan paling umum — membungkus semua fungsi secara tidak masuk akal dengan useCallback tanpa React.memo pada komponen anak. Jika komponen anak tidak dibungkus dengan React.memo, komponen tersebut tetap akan re-render setiap render induk, terlepas dari apakah referensi callback berubah atau tidak. useCallback tanpa React.memo — biaya tanpa manfaat.

• useCallback tanpa React.memo — komponen anak tetap re-render; optimasi tidak masuk akal.
• Dependensi yang terlupakan — jika di dalam callback digunakan variabel yang tidak dicantumkan di deps, callback mengandung stale closure.
• Memoization berlebihan — membungkus setiap fungsi, termasuk onClick trivial dengan console.log.
• Objek dan array di dependensi — referensi baru setiap render dianggap perubahan, memoization sia-sia.

// ❌ Sia-sia: tidak ada React.memo di child
const handle = useCallback(() => doStuff(), []);
<Child onClick={handle} />; // Child tetap re-render tanpa React.memo

// ❌ Stale closure: dependensi hilang
const handle = useCallback(() => {
    console.log(count); // count selalu 0 — stale closure!
}, []);

// ✅ Benar: sertakan dependensi
const handle = useCallback(() => {
    console.log(count);
}, [count]);

Masalah stale closure di useCallback diselesaikan dengan mencantumkan semua variabel yang digunakan di array dependensi. eslint-plugin-react-hooks dengan exhaustive-deps secara otomatis memeriksa bahwa semua variabel dari tubuh callback ada di array. Jika callback menggunakan setState, yang tidak berubah antar render, dapat dengan aman dicantumkan di deps — React menjamin stabilitas setState.