ReactJS - Menggunakan useMemo: Panduan untuk Pemula

Halo sana, para pengembang React yang bersemangat! Hari ini, kita akan mendalamkan salah satu hook yang kuat dari React: useMemo. Jangan khawatir jika Anda baru dalam dunia pemrograman; saya akan mengarahkan Anda melalui konsep ini secara langkah demi langkah, seperti yang saya lakukan untuk ribuan murid dalam tahunajaran saya. Jadi, ambil secangkir kopi (atau teh, jika itu hal Anda), dan mari kita mulai perjalanan yang menarik ini bersama!

Apa itu useMemo?

Sebelum kita masuk ke detail, mari kita pahami apa itu useMemo. Bayangkan Anda sedang memanggang kue (saya sukai analogi ini karena, well, siapa yang tidak menyukai kue?). Anda memiliki resep yang memerlukan beberapa perhitungan yang kompleks untuk menentukan jumlah cokelat yang sempurna. Sekarang, Anda akan menghitung ini setiap kali Anda memanggang kue, atau Anda akan menulisnya dan menggunakannya kembali? Itu esensialnya apa yang useMemo lakukan – itu mengingat (atau "memoize") hasil perhitungan supaya Anda tidak perlu mengulanginya secara tidak perlu.

Dalam istilah React, useMemo adalah hook yang memungkinkan Anda untuk menyimpan hasil perhitungan antara re-renders. Itu seperti memiliki asisten super cerdas yang mengingat tugas-tugas kompleks untuk Anda!

Tanda Tangan Hook useMemo

Mari kita lihat bagaimana kita sebenarnya menggunakan hook useMemo:

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

Jangan panik! Saya tahu ini mungkin terlihat sedikit menakutkan pada awalnya, tapi mari kitauraikan ini:

1. useMemo adalah nama hook kami.
2. Itu menerima dua argumen:

• Sebuah fungsi yang melakukan perhitungan kami (() => computeExpensiveValue(a, b))
• Sebuah array dari dependensi ([a, b])

3. Itu mengembalikan nilai yang dimemo.

Pertimbangkan ini: useMemo mengatakan, "Hey React, hanya jalankan perhitungan ini jika a atau b telah berubah. Selain itu, hanya berikan saya hasil yang Anda ingat dari waktu sebelumnya."

Menggunakan Hook useMemo

Sekarang, mari kita lihat useMemo dalam aksi dengan contoh dunia nyata. Bayangkan kita sedang membuat keranjang belanja untuk toko online (siapa yang tidak menyukai belanja online?).

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

function ShoppingCart() {
const [cart, setCart] = useState([
{ id: 1, name: "React T-Shirt", price: 20 },
{ id: 2, name: "React Hoodie", price: 40 },
{ id: 3, name: "React Cap", price: 15 }
]);

const totalPrice = useMemo(() => {
console.log("Menghitung harga total...");
return cart.reduce((total, item) => total + item.price, 0);
}, [cart]);

return (
<div>
<h2>Keranjang Belanja Anda</h2>
{cart.map(item => (
<div key={item.id}>{item.name} - ${item.price}</div>
))}
<h3>Total: ${totalPrice}</h3>
</div>
);
}

Mari kitauraikan ini:

1. Kita memiliki keranjang belanja dengan beberapa item, masing-masing memiliki nama dan harga.
2. Kita menggunakan useMemo untuk menghitung harga total semua item di keranjang.
3. Perhitungan hanya dijalankan ulang jika cart berubah (itu apa yang [cart] di akhir lakukan).
4. Kita menampilkan setiap item dan harga total.

Mengapa ini berguna? Bayangkan jika menghitung total adalah operasi yang sangat kompleks (mungkin melibatkan diskon, pajak, dll.). Tanpa useMemo, React akan menghitung ini setiap kali komponen re-renders, bahkan jika keranjang tidak berubah. Dengan useMemo, itu hanya menghitung saat diperlukan, mungkin menghemat banyak waktu pengolahan!

Menyimpan Referensi

Fitur lain yang super menarik dari useMemo adalah kemampuannya untuk menyimpan referensi. "Apa itu?" saya mendengar Anda bertanya. Baiklah, mari saya jelaskan dengan contoh lain.

Bayangkan Anda sedang membuat aplikasi daftar tugas (karena setiap pemrogrammer telah membuat salah satu ini pada suatu saat, percayalah!). Anda ingin menyaring tugas Anda berdasarkan statusnya.

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

function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: "Belajar React", completed: false },
{ id: 2, text: "Bangun aplikasi yang menakjubkan", completed: false },
{ id: 3, text: "Ubah dunia", completed: false }
]);

const [filter, setFilter] = useState('all');

const filteredTodos = useMemo(() => {
console.log("Saring todos...");
switch(filter) {
case 'completed':
return todos.filter(todo => todo.completed);
case 'active':
return todos.filter(todo => !todo.completed);
default:
return todos;
}
}, [todos, filter]);

return (
<div>
<h2>Daftar Tugas Saya</h2>
<button onClick={() => setFilter('all')}>Semua</button>
<button onClick={() => setFilter('active')}>Aktif</button>
<button onClick={() => setFilter('completed')}>Selesai</button>
{filteredTodos.map(todo => (
<div key={todo.id}>{todo.text}</div>
))}
</div>
);
}

Dalam contoh ini:

1. Kita memiliki daftar tugas dan status filter.
2. Kita menggunakan useMemo untuk membuat daftar tugas yang disaring berdasarkan filter saat ini.
3. Daftar disaring hanya dihitung ulang jika todos atau filter berubah.

Magiknya di sini adalah bahwa filteredTodos akan selalu memiliki referensi objek yang sama kecuali todos atau filter berubah. Ini sangat penting untuk optimasi kinerja, khususnya saat meneruskan daftar ini ke komponen anak.

Menutup

Dan itu dia, teman-teman! Kita telah mengembara melalui dunia useMemo, dari memahami konsep dasarnya hingga melihatnya dalam aksi dengan contoh dunia nyata. Ingat, useMemo seperti teman andalan Anda, selalu ada untuk membantu Anda optimalkan aplikasi React Anda dengan menghindari perhitungan yang tidak diperlukan.

Berikut adalah tabel rujukan cepat metode yang kita bahas:

Metode	Tujuan	Sintaks
useMemo	Memoize perhitungan yang mahal	useMemo(() => computation, dependencies)

Seperti dengan semua alat dalam pemrograman, gunakan useMemo bijaksana. Itu sangat cocok untuk optimasi kinerja, tetapi penggunaan yang berlebihan bisa sebenarnya membuat kode Anda lebih kompleks tanpa keuntungan yang signifikan. Seperti yang saya selalu katakan kepada murid-murid saya, "Dengan kekuatan yang besar datang tanggung jawab yang besar!"

Terus latih, terus bangun, dan terutama, terus bersenang-senang dengan React. Sebelum Anda tahu, Anda akan membuat aplikasi yang menakjubkan yang akan membuat bahkan pengembang berpengalaman mengatakan "Wah!" Dan ingat, jika Anda pernah merasa terjebak, cukup bayangkan Anda menjelaskan kode Anda kepada seekor bebek. Itu bekerja kesana-kesini, percayalah!

Happy coding, para master React masa depan!

Credits: Image by storyset