Dulu pernah nyoba ngefix bug siang dan malam, ternyata cuman kesalahan memoization doang.
Nah sekarang sambil menahan emosi, saya mau share tentang konsep memoization sendiri dari JavaScript terutama ReactJS.
Nah memoization ini sendiri apa sih? kok kayaknya rawan bug?
Nah jadi gini, setiap function itu ada proses re-creation (pembuatan ulang) pada setiap kali kita rerender Document Object Model (DOM), misal kita punya functionA, nah si functionA ini akan direcreate setiap kita rerender.
Nah ini tu gamasalah kalau functionnya cheap alias dalemnya gaterlalu banyak logic logic rumit, yang jadi masalah itu kalau semisalnya ada logic logic rumit yang makan waktu jika kita komputasi ya pokonya expensive lah si function itu.
Nah, kalau dah terlalu makan waktu, biasanya kita disarankan melakukan memoization (caching si result dari functionnya). Kalau untuk ReactJS, kita disediain function bawaan (istilahnya adalah Hooks) useMemo dan useCallback.
Fungsinya itu untuk performance optimization, misal kita dah melakukan komputasi yang rumit, hasil dari komputasi tersebut bisa disimpan sebagai cache. dimana jika kita butuh result dari komputasi tersebut untuk kedua kalinya, kita tinggal mengambil resultnya tanpa me-recreate function tersebut.
Nah, konsep ini lumayan advance, dalam artian kalau gak bener gunainnya bisa menghasilkan bug.
Contoh kita memutuskan untuk mememoize functionA, terus kita lupa atau tidak tau kalau functionA ini hasilnya bisa berbeda. Yaa, alhasil muncul bug yang tidak kita duga.
Nah kita perlu memutuskan sebuah kondisi kapan si function ini akan di recreate biar hasilnya susai dengan harapan kita.
Kalau di ReactJS, dalam Hooks useMemo / useCallback ini kita bisa mendefinisikan dependencies (ketergantungan), dimana jika value dari dependency ini berubah, kita akan recreate function secara otomatis, jika dependency ini valuenya tetap, maka kita akan memanggil result yang sudah kita cache.
Begitulah, jadi walaupun sangat berguna kalau untuk masalah cache mencache diharapkan hati hati.
Top comments (0)