Jangan sampe performa ngedrop! Kita bahas kesalahan useMemo yuk.

Pernah ngerasain aplikasi React yang mendadak jadi lemot kayak siput pas lagi seru serunya coding atau pas user lagi asik pakai aplikasi kita Waktu scrolling data bejibun malah lag terus performa ngedrop drastis bikin pusing tujuh keliling banget kan Nah jangan sampai kejadian itu bikin kita jadi bete atau bahkan dicomplain user. Kita semua pasti pengen banget aplikasi yang responsif dan ngebut kayak mobil balap F1. Salah satu senjata andalan kita para developer React buat optimasi performa itu ada namanya useMemo. Tapi kadang senjata ini malah jadi bumerang kalau salah pakainya.

Kita di Javapixa Creative Studio sering banget nemuin developer yang terjerat di labirin useMemo ini. Bukannya makin kenceng, performa aplikasi malah jadi makin kacau balau atau bahkan nggak ada bedanya sama sekali. Jadi, yuk sekarang kita bedah tuntas kesalahan kesalahan umum yang sering terjadi saat pakai useMemo. Kita kupas dari akarnya biar kita semua nggak terjebak lagi di lubang yang sama dan aplikasi kita bisa makin ngebut secepat kilat. Anggap aja ini sesi belajar bareng santai sambil ngopi dan ngoding ya.

Apa Itu useMemo Sebenarnya dan Kenapa Kita Butuh Dia

Sebelum kita bongkar kesalahan kesalahannya ada baiknya kita refresh dulu nih apa sih useMemo itu dan kenapa React sediain hook ini buat kita. Simplenya useMemo itu adalah sebuah hook di React yang dipakai buat memoize atau mengingat hasil dari sebuah komputasi yang mahal. Maksudnya komputasi yang mahal itu gimana Itu lho fungsi atau perhitungan yang butuh waktu dan sumber daya cukup banyak buat dieksekusi.

Misalnya kita punya fungsi yang ngefilter ribuan data atau ngitung sesuatu yang kompleks. Nah kalau fungsi ini dieksekusi berulang kali tiap kali komponen kita re render padahal inputnya nggak berubah itu kan buang buang sumber daya banget ya Ibaratnya kita ngitung ulang 1 tambah 1 padahal kita udah tahu hasilnya 2. Kan sia sia banget.

Di sinilah useMemo berperan. Dia akan mengingat hasil komputasi itu dan hanya akan menghitung ulang kalau ada salah satu dari nilai nilai di dependency array nya berubah. Kalau nggak ada yang berubah dia akan pakai hasil yang udah diingat tadi. Ini bikin aplikasi jadi lebih efisien karena komputasi yang mahal nggak perlu dieksekusi berkali kali. Cukup sekali aja sampai inputnya berubah. Asik kan

Kesalahan Paling Umum Saat Pakai useMemo

Oke sekarang waktunya kita masuk ke bagian inti. Kita bahas satu per satu kesalahan yang sering banget bikin performa aplikasi kita ngedrop atau useMemo jadi nggak berguna sama sekali.

Salah Paham Dependency Array itu Nomor Satu

Ini adalah kesalahan klasik yang paling sering kita jumpai. Dependency array itu kunci utamanya useMemo. Kalau kita salah ngasih atau malah nggak ngasih sama sekali ya udah bubar jalan deh.

Dependencies Kosong Tapi Malah Salah

Kadang kita lihat ada yang pakai useMemo tapi dependency array nya kosong []. Kalau tujuannya biar komputasi cuma dijalanin sekali aja saat mounting komponen itu sebenarnya oke. Tapi kita harus yakin banget kalau komputasi itu nggak butuh nilai dari props atau state yang bisa berubah di kemudian hari. Kalau sampai butuh nilai dari props atau state yang dinamis tapi dependency array nya kosong ya hasilnya nggak akan update. Kita malah dapat nilai yang basi atau nggak sesuai.

Lupa Ngasih Dependency Sama Sekali

Ini lebih parah lagi. Kalau kita nggak ngasih dependency array sama sekali useMemo( () => someExpensiveCalculation() ) itu sama aja bohong. useMemo nya nggak akan jalan seperti yang kita harapkan. Komputasi itu akan dieksekusi ulang tiap kali komponen re render. Jadi useMemo nya cuma jadi fungsi biasa aja. Nggak ada bedanya sama sekali.

Dependensi Berisi Objek atau Array Inline

Nah ini juga sering banget terjadi dan lumayan bikin pusing. Kita ngasih dependency array yang di dalamnya ada objek atau array yang kita buat inline di setiap render. Contohnya useMemo( () => doSomething(value) [ { key: 'value' } ] ). Objek { key: 'value' } ini akan selalu dianggap baru di setiap render oleh JavaScript meskipun isinya sama. Akibatnya useMemo akan selalu mengkomputasi ulang karena dia ngira dependency nya berubah padahal secara nilai isinya sama. Solusinya kita bisa memoize objek atau array itu pakai useRef atau useCallback jika itu fungsi atau buat objek/array nya di luar komponen jika memungkinkan.

Overuse useMemo Alias Semua Dimemoize

Mungkin karena saking semangatnya pengen aplikasi jadi ngebut atau salah paham sama konsep memoization beberapa dari kita cenderung memoize semuanya. Segala sesuatu yang ada di dalam komponen dikasih useMemo. Ini justru bisa jadi bumerang.

Memoizing Komputasi yang Nggak Mahal

useMemo itu ada overhead nya lho. React perlu menyimpan nilai yang dimemoize dan melakukan perbandingan di setiap render. Kalau komputasi yang kita memoize itu super ringan dan cepet banget dieksekusi kayak 1 + 1 atau ngecek panjang array yang kecil overhead dari useMemo nya sendiri bisa lebih mahal daripada komputasinya. Jadi jangan buang buang waktu dan resource buat memoize hal hal receh ya. Fokus sama komputasi yang memang benar benar mahal.

Menggunakan useMemo untuk Setiap Nilai Primitif

Kadang kita juga melihat orang pakai useMemo buat nilai nilai primitif seperti angka string atau boolean. Contohnya const myNumber = useMemo(() => 123, []) atau const myString = useMemo(() => 'hello', []). Ini sama sekali nggak perlu. Nilai primitif itu secara default sudah stabil di setiap render kecuali kalau kita ganti secara eksplisit. Jadi useMemo di sini cuma jadi penghambat bukan penolong.

Memakai useMemo Buat Efek Samping atau Mutasi

useMemo itu diciptakan buat memoize nilai bukan buat menjalankan efek samping atau memutasi data. Kalau kita butuh efek samping seperti fetch data update DOM atau subscribe ke event itu tugasnya useEffect. Kalau kita mutasi objek di dalam useMemo itu bisa bikin bug yang susah dilacak dan nggak sesuai sama filosofi React yang cenderung immutable. Ingat useMemo itu murni buat komputasi murni yang menghasilkan nilai tanpa efek samping.

Kapan Seharusnya Kita Pakai useMemo

Setelah tahu kesalahan kesalahannya sekarang kita bahas kapan sih waktu yang pas buat pakai useMemo biar hasilnya maksimal.

Ketika Komputasi Itu Mahal Banget

Ini poin utamanya. Pakai useMemo kalau kita punya fungsi yang memakan banyak waktu dan sumber daya buat dieksekusi. Contohnya memproses data besar melakukan sorting atau filtering data ribuan baris melakukan perhitungan matematika yang kompleks atau render komponen yang berat. Kalau komputasi itu ringan dan cepat lupakan useMemo.

Passing Objek atau Array Sebagai Props ke React.memo Komponen

Kita punya komponen anak yang dibungkus pakai React.memo tujuannya biar komponen anak ini nggak re render kalau props nya nggak berubah. Nah kalau kita ngirim props berupa objek atau array yang dibuat inline di komponen induk setiap kali komponen induk re render meskipun isinya sama objek/array itu akan dianggap baru. Akibatnya komponen anak yang udah di React.memo tetap akan re render. Untuk mengatasi ini kita bisa pakai useMemo di komponen induk untuk memoize objek atau array yang jadi props itu. Dengan begitu objek atau array yang dikirim akan stabil referensinya.

Referensi Objek atau Array Penting

Ada kalanya kita butuh menjaga referensi sebuah objek atau array agar tetap sama di setiap render sampai isi dari dependensinya benar benar berubah. Ini sering terjadi saat berinteraksi dengan API yang butuh objek spesifik atau saat kita bekerja dengan library lain yang bergantung pada referensi objek. useMemo bisa jadi penyelamat di sini.

Tips dan Trik useMemo Biar Performa Tetap Ngebut

Kita udah bahas banyak hal nih. Sekarang yuk kita rangkum tips dan triknya biar kita makin jago pakai useMemo.

Pakai React DevTools Profiler

Jangan cuma menebak nebak apakah useMemo kita itu ngasih efek positif atau nggak. Kita punya alat canggih namanya React DevTools Profiler. Dengan profiler ini kita bisa melihat komponen mana yang re render berapa lama waktu yang dihabiskan untuk render dan komputasi mana yang mahal. Dari situ kita bisa tahu titik mana yang perlu dioptimasi dengan useMemo. Ini cara paling akurat buat menentukan apakah useMemo itu bermanfaat atau malah jadi beban.

Memoize Hasil Komputasi yang Mahal Bukan Semuanya

Selalu ingat prinsip ini. useMemo bukan obat mujarab buat semua masalah performa. Dia adalah alat spesifik untuk masalah spesifik yaitu komputasi yang mahal. Jangan kalap memoize semua hal. Pikirkan baik baik apakah komputasi itu benar benar mahal dan apakah hasilnya benar benar perlu dipertahankan referensinya.

Perhatikan Dependency Array Dengan Cermat

Ini krusial banget. Pastikan dependency array kita berisi semua nilai yang digunakan dalam komputasi yang bisa berubah. Kalau ada nilai yang lupa dimasukkan useMemo akan memberikan hasil yang usang. Kalau ada nilai yang tidak perlu dimasukkan atau nilai yang selalu baru setiap render seperti objek atau array inline useMemo mungkin akan selalu mengkomputasi ulang. Gunakan useCallback jika yang ingin kita memoize adalah sebuah fungsi dan pastikan dependensinya juga benar.

Jangan Takut Menghapus useMemo Kalau Nggak Ada Benefitnya

Kadang kita udah pasang useMemo sana sini tapi setelah diprofiling ternyata performanya gitu gitu aja atau bahkan lebih buruk. Kalau sudah begini jangan ragu buat hapus useMemo nya. Mungkin overhead nya lebih besar daripada manfaatnya atau memang komputasinya nggak semahal yang kita kira. useMemo itu alat buat optimasi bukan kewajiban di setiap baris kode. Kesederhanaan kode kadang lebih baik daripada optimasi prematur yang tidak perlu.

Penutup dari Javapixa Creative Studio

Nah itu dia pembahasan lengkap kita tentang kesalahan kesalahan umum saat menggunakan useMemo dan gimana cara pakainya yang benar. Semoga setelah ini kita semua jadi lebih paham dan bisa pakai useMemo dengan bijak ya. Ingat tujuan kita adalah membangun aplikasi yang cepat responsif dan memberikan pengalaman terbaik buat user. useMemo adalah salah satu tools yang ampuh tapi dia harus dipakai dengan pemahaman yang benar.

Jangan takut untuk bereksperimen dan belajar dari kesalahan. Kita semua pasti pernah melakukan kesalahan dalam coding itu hal yang wajar. Yang penting kita mau belajar dan terus meningkatkan skill. Kalau ada pertanyaan atau mau sharing pengalaman pakai useMemo jangan sungkan ya Kita di Javapixa Creative Studio selalu terbuka buat diskusi asik seputar dunia ngoding. Tetap semangat ngodingnya dan mari kita bikin aplikasi aplikasi yang makin ngebut dan mantap jiwa.