Belajar React Hooks Dasar

Jadi teman-teman ini merupakan 5 hooks dasar react yang perlu kamu ketahui, karena ini bakal sering dipakai. Setelah mengerti ini nantinya kita bakal lanjut ke hook custom.

Jadi ini merupakan 5 hook yang paling sering kepake.

1. useState - untuk menyimpan dan mengubah data(state)

Fungsi utama: menyimpan nilai yang bisa berubah di dalam komponen dan memicu re-render ketika berubah.

Contoh:

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

return (
  <button onClick={() => setCount(count + 1)}>
    klik {count} kali
  </button>
)

Kasus umum

• Counter, form input, toogle dark mode, data yang berubah secara interaktif.

Mantra Kalau butuh nilai yang berubah dan pengen tampilannya ikut berubah, panggil "useState."

2. useEffect - untuk efek samping(side effects)

Fungsi utama: menjalankan kode setelah render terjadi, biasanya untuk ambil data, update DOM, atau subscribe event.

Contoh

useEffect(() => {
  console.log("Komponen muncul");
  return() => console.log("komponen hilang);
}, []); 

Kasus umum

• fetch API data
• set interval/event listener
• sinkronisasi dengan localStorage

mantra Kalau butuh ngelakuin sesuatu setelah render terjadi, panggil useEffect.

3. useRef - untuk menyimpan nilai yang tidak memicu render

fungsi utama: menyimpan reference (misal ke elemen DOM atau variabel) tanpa menyebabkan render ulang. Ini berguna kalau kamu mau menyimpan suatu nilai, tapi tidak menampilkan di UI.

contoh

const inputRef = useRef();
function focusInput() {
  inputRef.current.focus();
}

return <input ref={inputRef} placeholder="klik tombol fokus" />;

kasus umum

• fokus input otomatis
• simpan nilai sebelumnya
• hitung berapa kai render terjadi tanpa re-render

mantra kalau butuh nyimpen sesuatu tapi gak pengen render ulang, pakai useRef.

4. useCallback - untuk memoize fungsi

fungsi utama menyimpan reference fungsi agar tidak dbuat ulang setiap render. Cocok kalau fungsi itu dikirim ke komponen anak atau digunakan di useEffect.

versi dan perbedaan bentuk const fn = () => {...}

penjelasan tanpa useCallback

perilaku fungsi selalu dibuat ulang setiap render

bentuk const fn = useCallback(() => {...}, [])

penjelasan dependensi kosong

perilaku fungsi dibuat sekali saat render pertama, lalu disimpan selamanya

bentuk const fn = useCallback(() => {..., [dependensi])

penjelasan dengan dependensi

perilaku fungsi dibuat ulang hanya kalau dependensi berubah

contoh const handleClick = useCallback(() => { console.log("clicked"); }, [userId]);

• kalau userId tetap, fungsi lama dipakai(gak dibuat ulang)
• kalau userId berubah, react ngebuat fungsi baru (karena isi fungsinya tergantung userId)

apa yang mentrigger fungsi dibuat ulang?

1. komponen render ulang(karena state/props/context berubah)
2. lalu react cek dependensi di array []
3. jika salah satu dependensi berubah, fungsi dibuat ulang kalau semua tetap sama, fungsi lama dipakai ulang.

contol real

const handleClick = useCallback(() => {
   console.log("Hello  " + user.name);
}, [user.name])

kalau user.name berubah, fungsi baru dibuat, karena isi fungsi butuh nilai terbaru. kalau user.name gak berubah, fungsi lama dipakai kembali

5. useMemo - untuk memoize hasil perhitungan

fungsi utama menyimpan hasil kalkulasi berat supaya tidak dihitung ulang setiap render.

versi & perbedaan bentuk const total = items.reduce

penjelasan tanpa useMemo

perilaku selalu dihitung ulang di tiap render

bentuk const total = useMemo(() => ..., [])

pejelasan dependensi kosong

perilaku dihitung sekali di render pertama, lalu hasilnya disimpan

bentuk const total = useMemo(() => ..., [items])

penjelasan dengan dependensi

perilaku hanya dihitung ulang kalau items berubah

contoh

const total = useMemo(() => {
  console.log("hitung ulang total")
  return items.reduce((sum, item) => sum + item.price, 0);
}, [items])

kalau items tetap -> react ambil nilai total yang tersimpan kalau items berubah -> react panggil ulang fungsi di dalam useMemo

apa yang mentrigger perhitungan ulang

1. komponen render ulang (karena state/props/context berubah)
2. react cek dependensi [items]
3. kalau ada yang berubah -> panggil ulang fungsi -> simpan hasil baru kalau tidak -> skip kalkulasi, pakai hasil lama.

kalau sudah lancar lanjut kesini ya. Belajar membuat hook custom