Panduan Pemula Menggunakan useMemo di ReactJS

Hai teman-teman pemula React! Hari ini, kita akan mendalami salah satu hook yang kuat di React: useMemo. Jangan khawatir jika Anda masih baru dalam programming; 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 menarik ini bersama!

Apa Itu useMemo?

Sebelum kita masuk ke hal yang mendalam, mari kita pahami apa itu useMemo. Bayangkan Anda sedang memanggang kue (saya mencintai analogi ini karena, well, siapa yang tidak suka kue?). Anda punya resep yang memerlukan beberapa perhitungan kompleks untuk menentukan jumlah yang sempurna untuk cokelat. Sekarang, Anda akan menghitung ini setiap kali Anda memanggang kue, atau Anda akan menulisnya dan menggunakannya lagi? Itu sebenarnya 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 menyimpan hasil perhitungan antara re-renders. Itu seperti memiliki asisten super pintar yang mengingat tugas kompleks bagi 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 pertama kali, tapi mari kita pecahkan itu:

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

• Sebuah fungsi yang melakukan perhitungan kami (() => computeExpensiveValue(a, b))
• Sebuah array 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 sebelumnya."

Menggunakan Hook useMemo

Sekarang, mari kita lihat useMemo dalam aksi dengan contoh dunia nyata. Bayangkan kita sedang membangun keranjang belanja untuk toko online (karena siapa yang tidak suka 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("Calculating total price...");
return cart.reduce((total, item) => total + item.price, 0);
}, [cart]);

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

Mari kita pecahkan ini:

1. Kita punya 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 saat 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 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 proses!

Menyimpan Referensi

Fitur lain yang sangat menarik di useMemo adalah kemampuannya untuk menyimpan referensi. "Apa itu?" saya dengar Anda bertanya. Baik, mari saya jelaskan dengan contoh lain.

Bayangkan Anda sedang membangun aplikasi daftar tugas (karena setiap programmer sudah pernah membuat satu dari ini, percayalah!). Anda ingin menyaring tugas Anda berdasarkan statusnya.

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

function TodoList() {
const [todos, setTodos] = useState([
{ id: 1, text: "Learn React", completed: false },
{ id: 2, text: "Build amazing apps", completed: false },
{ id: 3, text: "Change the world", completed: false }
]);

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

const filteredTodos = useMemo(() => {
console.log("Filtering 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>My Todo List</h2>
<button onClick={() => setFilter('all')}>All</button>
<button onClick={() => setFilter('active')}>Active</button>
<button onClick={() => setFilter('completed')}>Completed</button>
{filteredTodos.map(todo => (
<div key={todo.id}>{todo.text}</div>
))}
</div>
);
}

Dalam contoh ini:

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

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

Penutup

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

Berikut adalah tabel rujukan cepat metode yang kita telah bahas:

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

Seperti dengan setiap alat di programming, gunakan useMemo bijaksana. Itu sangat baik untuk optimasi performa, tapi penggunaannya yang berlebihan bisa sebenarnya membuat kode Anda lebih kompleks tanpa keuntungan signifikan. Seperti yang saya selalu katakan kepada murid-murid saya, "Dengan kekuatan yang besar datang tanggung jawab yang besar!"

Tetap latih, tetap bangun, dan terutama, tetap bersenang-senang dengan React. Sebelum Anda tahu, Anda akan membuat aplikasi yang menakjubkan yang akan membuat developer yang berpengalaman mengatakan "Wow!" Dan ingat, jika Anda pernah merasa bingung, hanya bayangkan Anda menjelaskan kode Anda ke seekor bebek balsem. Itu bekerja wonder, percayalah!

Happy coding, master React masa depan!

Credits: Image by storyset