Bab 10: Optimasi Performa

Mencegah render yang tidak perlu dengan `memo`, `useCallback`, dan `useMemo`.

Masalah: Render yang Tidak Perlu

Setiap kali *state* atau *props* sebuah komponen berubah, komponen tersebut dan semua anaknya akan di-render ulang. Terkadang, komponen anak di-render ulang meskipun *props*-nya tidak berubah sama sekali. Pada aplikasi yang kompleks, ini bisa menyebabkan masalah performa.

Solusi Optimasi

1. `React.memo`

`memo` adalah *Higher-Order Component* (HOC) yang membungkus komponen Anda. Ia akan mencegah komponen tersebut di-render ulang jika *props*-nya tidak berubah dari render sebelumnya.

const MyComponent = memo(function MyComponent(props) {
  /* ... */
});

2. `useCallback`

Masalahnya, jika Anda memberikan sebuah fungsi sebagai *prop* ke komponen yang dibungkus `memo`, fungsi tersebut akan dibuat ulang setiap kali komponen induk di-render. Ini membuat `memo` tidak berguna. useCallback mengingat (memoize) fungsi Anda sehingga ia tidak dibuat ulang kecuali dependensinya berubah.

const handleClick = useCallback(() => {
  // ...
}, [dependencies]);

Contoh Interaktif

Di bawah ini, state Waktu berjalan diperbarui setiap detik, menyebabkan komponen induk re-render. Buka console browser Anda dan perhatikan log render dari HeavyComponent.

Waktu berjalan: 0 detik. (State ini berubah setiap detik, memicu re-render)

Tanpa Optimasi

Fungsi `onClick` dibuat ulang setiap detik, menyebabkan komponen berat ikut re-render.

Ini adalah komponen berat yang seharusnya tidak sering di-render ulang.

Dengan `useCallback`

Fungsi `onClick` di-memoize, sehingga komponen berat tidak re-render saat waktu berubah.