Detail Info

Aplikasi penghitung (counter) dengan komponen anak yang menerima fungsi dari parent. Kita optimasi fungsi agar tidak dibuat ulang setiap render menggunakan useCallback.

Struktur:

Parent: menyimpan state count dan fungsi increment.
Child: tombol yang memanggil increment.

Kode:

jsxCopyEditimport React, { useState, useCallback } from 'react';

const IncrementButton = React.memo(({ onIncrement }) => {
  console.log('Child component rendered');
  return <button onClick={onIncrement}>+1</button>;
});

function CounterApp() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount((prev) => prev + 1);
  }, []); // fungsi tidak akan berubah antar render

  return (
    <div>
      <h1>Count: {count}</h1>
      <IncrementButton onIncrement={increment} />
    </div>
  );
}

Penjelasan useCallback:

Fungsi increment tidak dibuat ulang di setiap render karena dibungkus useCallback.
Tanpa useCallback, komponen IncrementButton akan selalu re-render walau tidak perlu.
Cocok dipakai saat passing fungsi ke komponen anak yang di-memoize (pakai React.memo).

useCallback – Counter dengan Tombol Anak (Child Button)