useMemo adalah React hook yang digunakan untuk memoisasi komponen fungsional. Memoisasi adalah teknik optimasi dimana hasil komputasi disimpan dalam cache sehingga komputasi tidak dijalankan kembali jika input pada komputasi (dependensi) tidak berubah. Hal ini khususnya berguna untuk penghitungan atau operasi mahal yang tidak perlu dievaluasi ulang pada setiap render.
 |
| #24 Tutorial Penggunaan UseMemo ReactJS |
Contoh penggunaan syntax
const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
Di sini, computeExpensiveValue adalah fungsi yang merepresentasikan komputasi mahal, dan [a, b] merupakan array dependensi. Nilai memoized (memoizedValue) hanya akan dihitung ulang ketika salah satu dependensi (a atau b) berubah
Contoh Penggunaan UseMemo
Di React, hook useMemo digunakan untuk menyimpan hasil komputasi sehingga hanya dihitung ulang ketika dependensinya berubah. Hal ini sangat berguna untuk mengoptimalkan performa dalam situasi di mana komputasi memerlukan biaya yang mahal dan tidak perlu dihitung ulang pada setiap render.
Berikut ini contoh penggunaan useMemo dalam komponen fungsional React:
import React, { useState, useMemo } from 'react';
const ExampleComponent = () => {
// State variables
const [inputValue, setInputValue] = useState('');
const [data, setData] = useState([]);
// Expensive computation function
const expensiveComputation = (input) => {
console.log('Executing expensive computation...');
// Simulating a time-consuming operation
for (let i = 0; i < 1000000000; i++) {}
return `Result: ${input}`;
};
// Memoized result using useMemo
const memoizedResult = useMemo(() => {
return expensiveComputation(inputValue);
}, [inputValue]);
// Event handler for input change
const handleInputChange = (e) => {
setInputValue(e.target.value);
};
// Event handler for button click
const handleButtonClick = () => {
setData((prevData) => [...prevData, memoizedResult]);
};
return (
<div>
<input type="text" value={inputValue} onChange={handleInputChange} />
<button onClick={handleButtonClick}>Add Result to Data</button>
<div>
<h2>Data:</h2>
<ul>
{data.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
</div>
);
};
export default ExampleComponent;
Dalam contoh ini:
- Kita memiliki fungsi komputasi mahal (expensiveComputation) yang mensimulasikan operasi yang memakan waktu.
- Kita menggunakan hooks useMemo untuk mengingat hasil komputasi mahal berdasarkan ketergantungan inputValue. Artinya komputasi hanya akan dieksekusi ketika inputValue berubah.
- Hasil memoisasi kemudian digunakan ketika tombol diklik untuk memperbarui status data.
- Dengan mengingat hasil komputasi yang mahal, kami menghindari penghitungan ulang yang tidak perlu dan meningkatkan kinerja komponen React kami.
Sekian #24 Tutorial Penggunaan UseMemo ReactJS dari konsepkoding semoga artikel ini daat bermanfaat dan membantu kamu yang sedang mempelajari ReactJs.
Baca Juga Tutorial ReactJS lainnya :
0 Comments