Sazumi Viki
Mengoptimalkan Performa React Apps dengan React.memo dan useCallback

Mengoptimalkan Performa React Apps dengan React.memo dan useCallback

Mengoptimalkan Performa React Apps dengan React.memo dan useCallback

Dalam dunia development , performa aplikasi menjadi salah satu aspek penting yang tidak bisa diabaikan, nih. React, sebagai salah satu library JavaScript populer, menawarkan berbagai cara untuk mengoptimalkan performa aplikasi kamu. Dua fitur yang sering digunakan untuk tujuan ini adalah React.memo dan useCallback.

Dalam postingan ini, kita akan menjelajahi bagaimana kedua fitur ini dapat membantu meningkatkan efisiensi aplikasi React kamu, terutama bagi kamu yang sudah memiliki pengalaman menggunakan React dan ingin meningkatkan skill kamu ke level selanjutnya.

Apa itu React.memo?

React.memo adalah higher order component (HOC) yang memungkinkan kamu untuk mengontrol re render komponen fungsi. Ini akan menyimpan hasil terakhir dari komponen tersebut dan hanya akan melakukan re render jika input (props) ke komponen berubah. Cara kerja React.memo sangat berguna dalam mengurangi jumlah rendering yang tidak perlu, yang pada waktunya meningkatkan performa aplikasi.

Cara Penggunaan

1
2
3
const MyComponent = React.memo(function MyComponent(props) {
  // render menggunakan props
});

Penerapan React.memo sangat sederhana; kamu hanya perlu membungkus komponen kamu dengan React.memo. Ini akan membuat React membandingkan props sebelumnya dengan props baru. Jika sama, React akan melewati rendering komponen tersebut.

Apa itu useCallback?

useCallback adalah hook yang digunakan untuk menyimpan dan menyimpan fungsi. Ini berguna ketika fungsi tersebut di-pass sebagai callback ke komponen anak yang di render secara berlebihan. Dengan useCallback, kamu dapat memastikan bahwa fungsi tidak dibuat ulang pada setiap render, sehingga menghindari re render yang tidak perlu dari komponen.

Cara Penggunaan

1
2
3
4
5
6
7
8
9
10
11
12
import React, { useCallback } from 'react';

function MyComponent({ propA }) {
  const memoizedCallback = useCallback(
    () => {
      // Lakukan sesuatu dengan propA
    },
    [propA], // Hanya akan di-recreate jika `propA` berubah
  );

  return <ChildComponent onSomeEvent={memoizedCallback} />;
}

Dalam contoh di atas, memoizedCallback akan tetap sama selama nilai propA tidak berubah, yang berarti ChildComponent tidak akan melakukan re-render yang tidak perlu karena perubahan fungsi callback.

Kapan Menggunakan React.memo dan useCallback?

Penggunaan React.memo dan useCallback dapat meningkatkan performa aplikasi kamu, tetapi penting untuk diingat bahwa 2 fitur itu tidak selalu diperlukan. Berikut beberapa panduan umum:

  1. Gunakan React.memo jika kamu memiliki komponen yang sering menerima prop yang sama pada berbagai re render. Ini sangat efektif untuk komponen yang berat dan kompleks.
  2. Gunakan useCallback ketika kamu perlu mem pass sebuah callback ke komponen yang dioptimalkan (misalnya, komponen yang dibungkus dengan React.memo) atau ketika callback tersebut digunakan dalam dependency array hook lain seperti useEffect, useMemo, atau useCallback itu sendiri.

Kesimpulan

Mengoptimalkan performa aplikasi React tidak hanya meningkatkan pengalaman pengguna tetapi juga membantu dalam pengembangan aplikasi yang lebih efisien. React.memo dan useCallback adalah dua fitur yang bisa digunakan untuk mengurangi jumlah re render yang tidak perlu, yang pada akhirnya meningkatkan performa aplikasi.

Namun, penting untuk menggunakan fitur-fitur ini dengan bijak dan hanya di tempat yang benar-benar membutuhkannya, karena penggunaan yang berlebihan dapat menyebabkan kompleksitas kode tanpa manfaat performa yang signifikan.

Melalui pemahaman dan penerapan strategi optimasi seperti ini, kamu dapat membawa aplikasi React kamu ke level selanjutnya, memastikan bahwa aplikasi tidak hanya kuat dari segi fitur tetapi juga unggul dalam performa.

Referensi

Medium
Dev To
Parsinta

Author:Sazumi Viki
Link:https://www.sazumi.moe/Mengoptimalkan-Performa-React-Apps-dengan-React-memo-dan-useCallback/
Licenses:By CC BY-NC-SA 3.0 CN Creative Commons
×