ReactJS - Menggunakan useCallback: Panduan untuk Pemula

Hai, pengembang React masa depan! Hari ini, kita akan mendalami salah satu hook yang kuat dari React: useCallback. Jangan khawatir jika Anda baru belajar pemrograman; saya akan memandu Anda melalui konsep ini secara bertahap, seperti yang saya lakukan untuk banyak siswa selama tahun-tahun pengajaran saya. Mari kita mulai perjalanan menarik ini bersama!

Apa itu useCallback?

Sebelum kita masuk ke detailnya, mari kita pahami apa itu useCallback. Bayangkan Anda sedang membuat kue (saya menyukai analogi ini karena, well, siapa yang tidak menyukai kue?). Anda memiliki resep khusus yang Anda gunakan setiap kali. useCallback seperti menulis resep itu sekali dan menggunakannya setiap kali Anda ingin membuat kue, bukan mencoba untuk mengingatnya setiap kali.

Dalam istilah React, useCallback adalah hook yang membantu kita optimalkan performa aplikasi kita dengan memoizing (menyimpan) fungsi.

Tanda Tangan Hook useCallback

Marilah kita lihat bagaimana menulis useCallback:

const memoizedCallback = useCallback(
() => {
doSomething(a, b);
},
[a, b],
);

Jangan panik! Saya tahu ini mungkin terlihat kompleks, tapi kita akan membongkarnya:

1. memoizedCallback: Ini adalah fungsi yang useCallback kembalikan.
2. () => { doSomething(a, b); }: Ini adalah fungsi yang kita ingin memoize.
3. [a, b]: Ini disebut array dependensi. Ini memberitahu React kapan membuat lagi fungsi kita.

Pikirkan seperti ini: Anda memberitahu React, "Hey, ingatkan ini untuk saya, dan hanya berikan saya yang baru jika a atau b berubah."

Menggunakan useCallback

Sekarang, mari kita lihat useCallback dalam aksi dengan contoh sederhana:

import React, { useState, useCallback } from 'react';

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

const increment = useCallback(() => {
setCount(c => c + 1);
}, []);

return (
<div>
Count: {count}
<button onClick={increment}>Increment</button>
</div>
);
}

Bongkarlah ini:

1. Kita import useCallback dari React.
2. Kita buat variabel state count menggunakan useState.
3. Kita definisikan fungsi increment menggunakan useCallback. Fungsi ini akan meningkatkan angka kita sebanyak 1.
4. Array kosong [] sebagai argumen kedua berarti fungsi ini tidak akan pernah berubah.
5. Kita render angka kita dan tombol yang memanggil increment saat ditekan.

Kasus Penggunaan useCallback

Sekarang Anda mungkin bertanya-tanya, "Kapan harus saya gunakan useCallback?" Pertanyaan bagus! Mari kita lihat beberapa scenario umum:

1. Mengirim Callback ke Komponen Anak yang Dioptimalkan

Bayangkan Anda memiliki komponen anak yang dibungkus oleh React.memo (jangan khawatir tentang ini saat ini, kita akan bahasnya di lesan berikutnya). Anda ingin mengirimkan fungsi ke komponen ini:

import React, { useState, useCallback } from 'react';

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

const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);

return (
<div>
<ChildComponent onClick={handleClick} />
<p>Count: {count}</p>
</div>
);
}

const ChildComponent = React.memo(({ onClick }) => {
console.log("Child rendered!");
return <button onClick={onClick}>Increment</button>;
});

Di sini, useCallback memastikan bahwa handleClick hanya berubah jika count berubah, mencegah re-render yang tidak diperlukan dari ChildComponent.

2. Dalam Dependensi useEffect

useCallback juga berguna saat fungsi adalah dependensi dari hook useEffect:

import React, { useState, useCallback, useEffect } from 'react';

function DataFetcher() {
const [data, setData] = useState(null);

const fetchData = useCallback(() => {
// Bayangkan ini adalah pengambilan data dari API
setTimeout(() => setData("New Data!"), 1000);
}, []);

useEffect(() => {
fetchData();
}, [fetchData]);

return <div>{data ? data : "Loading..."}</div>;
}

Dalam contoh ini, useCallback memastikan bahwa fetchData tidak berubah pada setiap render, mencegah effect berjalan tanpa perlu.

Keuntungan dan Kerugian

Marilah kita rangkum keuntungan dan kerugian dari useCallback:

Keuntungan	Kerugian
Mencegah re-render yang tidak diperlukan	Dapat membuat kode lebih kompleks
Optimalkan performa untuk komponen anak	Pemakaian berlebihan dapat menyebabkan masalah performa
Berguna dalam dependensi useEffect	Memerlukan pemahaman tentang closure dan memoization
membantu membuat callback stabil	Mungkin tidak memberikan keuntungan yang signifikan dalam komponen sederhana

Kesimpulan

Wah! Kita telah menempuh banyak hal hari ini. useCallback adalah alat kuat dalam peralatan React Anda, tapi seperti semua alat, penting untuk digunakan bijak. Sebagai Anda terus melanjutkan perjalanan React Anda, Anda akan mengembangkan keadaan untuk mencari useCallback.

Ingat, optimisasi adalah hal yang bagus, tapi kode yang jelas dan mudah dibaca adalah yang lebih penting. Jangan merasa terpaksa untuk menggunakan useCallback di mana-mana – gunakanlah saat itu cocok untuk aplikasi Anda.

Terus latih, tetap bersemangat, dan selamat coding! Dan ingat, seperti memperfect resep kue, menguasai React memerlukan waktu dan kesabaran. Anda bisa melakukan ini!

Credits: Image by storyset