[Week 13] Simple Profiling menggunakan React Native Slowlog

Kelompok kami sedang bekerja untuk meningkatkan kinerja aplikasi LapakLaut. Ketika ingin membahas masalah optimisasi kinerja, profiling adalah langkah pertama. Disini kami menggunakan library react-native-slowlog dalam pengaplikasian profiling.

React Native Slowlog

Banyak database mengimplementasikan fitur yang disebut “Slow Query Log” atau disingkat menjadi “slowlog”, yang merupakan file yang digunakan database untuk mencatat query yang sangat lambat. File ini dapat dipasang dan dikirim ke layanan agregasi log yang memberi tahu ketika terjadi query yang lambat.

Konsep yang sama pula dapat digunakan dalam React Native dengan react-native-slowlog. Informasi secara realtime dari hal-hal lambat yang terjadi di aplikasi dapat ditampilkan.

React Native Slowlog bisa menjadi salah satu pilihan ketika ingin melihat rendering performance. Salah satu kelebihan dari library ini adalah dapat menentukan custom threshold. Slowlog hanya akan berjalan dalam developer mode(menggunakan flag __DEV__).

import slowlog from 'react-native-slowlog';

Pemakaian slowlog ini hanya dengan menambahkan ‘slowlog(this, /.*/)’ pada constructor class.

export default class ProductDetails extends Component {
  constructor(props) {
    super(props);
    slowlog(this, /.*/, {threshold: 1});
    
    ...
  }
}

slowlog(this, /.*/, {threshold: 1}) akan memunculkan peringatan berupa kotak kuning jika runtime suatu komponen melebihi 1 millisecond.

menampilkan slowlog jika melebihi 1 ms

dari gambar-gambar diatas terdapat beberapa yang runtime nya melebihi 1 millisecond, contohnya render dan pemanggilan componentDidMount.

fitur chat juga memakan waktu rendering yang lebih lama yaitu sekitar 9 millisecond.

Tidak melacak kinerja aplikasi yang dibuat adalah hal yang tidak disarankan. Profiling tools membantu developer melacak kinerja apakah mengarah lebih baik atau lebih buruk.