bahas hack performance di react / react native ( dari pengalaman pribadi waktu dulu haha ) useState vs useRef case : memilih lokasi dari pin map 1. penggunaan useState penggunaan useState untuk case ini tidak dianjurkan karena memicu re-render setiap posisi berubah…

perhatikan contoh code dibawah, setiap posisi berubah setSelectedPosition ( state updater ) dipanggil , ini memicu re-render, setiap kali diperbaharui, jika posisi sering berubah ini menyebabkan excessive renders. render ulang yg tidak perlu hanya akan menurunkan performa…

terlebih pada low end device, karena menambah beban tambahan pada CPU dan memori karena banyaknya panggilan di onHandleChangePosition. bisa dilihat pada video pertama di atas, begitu banyak render yg tidak perlu , dan itu membuat berat app, setiap kali user melakukan interaksi.

sebelum ke solusi, saya jelaskan dulu perbedaan useRef & useState useRef : digunakan untuk menyimpan nilai yang tidak memicu re-render saat nilainya berubah useState : digunakan untuk menyimpan nilai yang akan memicu re-render jika nilai tersebut diperbarui.

2. penggunaan useRef penggunaan useRef & debounce pada case ini bisa menjadi alternatif untuk “memboost” performance dan mengurangi render yang tidak perlu, karena perubahan nilainya tidak mempengaruhi UI secara langsung…

perhatikan code dibawah, selectedPositionRef menyimpan posisi tanpa menyebabkan komponen melakukan render ulang saat nilainya berubah. saat posisi berubah, nilai baru disimpan di selectedPositionRef menggunakan debounce, hal ini untuk mencengah fungsi dipanggil terlalu sering..

debounce membatasi frekuensi pembaruan posisi, memastikan fungsi onHandleChangePosition tidak dipanggil terlalu sering, sehingga menghemat resource. karena selectedPositionRef tidak menyebabkan re-render , maka perubahan nilai ini tidak membenani CPU dan memori.

lalu bagaimana cara untuk menampilkan nilai dari useRef ke UI ? jika penggunaan useRef sendiri tidak mentrigger re-render ? perhatikan code dibawah

saat user menenekan tombol select point, nilai dari selectedPositionRef disinkronisasi ke selectedPosition menggunakan setSelectedPosition. karena selectedPosition adalah state, ini memicu render ulang hanya jika diperlukan (misalnya, untuk memperbarui UI).

penggunaan kombinasi useRef, useState, dan debounce menjadi solusi yang cukup baik untuk case yang melibatkan banyak pembaruan nilai yang tidak membutuhkan render ulang, sehingga dari kombinasi tersebut dapat mengurangi beban CPU, memori, dan menjadi UI tetap responsif.

mengapa penting ? 1. UI harus responsive meskipun posisi sering diperbarui, panggilan fungsi yang tidak di optimasi dapat membuat UI terasa lambat , freeze, atau lagging.

2. hemat resource di aplikasi yg menggunakan peta, posisi dapat diupdate ratusan kali dalam hitungan detik, jika setiap update memicu render ulang, aplikasi akan menggunakan banyak resource dan tentuk berdampak pada performa.

3. membuat app tidak RASIS 😂 maksudnya rasis disini adalah , jangan membuat app yang hanya dapat dijalankan secara baik di high end device saja, tapi perhatikan low end devicenya juga, dan harus sama” memiliki experience yg sama , tidak lag / freeze…

karena tidak semua orang mempunyai rezeki yang lebih untuk membeli high end device , maka oleh sebab itu jadilah developer yang tidak tumpul ke bawah dan harus selalu memegang teguh keadilan dalam medevelop / membuat fitur”nya hahaha. sekian, semoga bermanfaat, terimakasih 🙏🏻

Download our ebook to unlock the secrets to efficient React Native TV apps 🔐 Packed with expert advice, from us and the Amazon Developers team, this guide is your key to creating high-performing apps 🗝️