Reactjs Hooks Usestate Useeffect Usememo Usecallback Useref

Definisi

Hooks adalah API fungsi di React yang dipakai untuk memberi komponen fungsional kemampuan seperti menyimpan state, menjalankan side effect, menyimpan referensi nilai lintas render, dan mengoptimalkan nilai atau fungsi yang mahal untuk dihitung ulang.

Lima hooks dasar yang paling sering muncul di komponen aplikasi nyata adalah:

useState untuk state lokal yang memicu rerender.
useEffect untuk sinkronisasi dengan dunia luar setelah render.
useMemo untuk menyimpan hasil perhitungan agar tidak dihitung ulang setiap render.
useCallback untuk menyimpan referensi fungsi agar stabil antar render.
useRef untuk menyimpan nilai mutable atau referensi DOM tanpa memicu rerender.

Kalau dipakai dengan tepat, hooks membuat komponen tetap kecil, terukur, dan mudah di-debug. Kalau dipakai asal, masalah yang muncul biasanya bukan error sintaks, melainkan rerender berulang, dependency array yang salah, atau efek yang jalan di waktu yang tidak diinginkan.

Gambaran besar alur render

Loading diagram...

Inti yang perlu diingat:

useState mengubah data yang memicu render.
useEffect biasanya dijalankan sesudah render selesai tampil.
useMemo dan useCallback tidak menghentikan render; keduanya hanya membantu menjaga hasil atau referensi tetap stabil.
useRef menyimpan nilai yang bertahan antar render tanpa ikut menjadi pemicu render.

useState

Kapan dipakai

Pakai useState saat komponen perlu menyimpan data yang berubah dan perubahan itu harus terlihat di UI.

Contoh umum:

nilai input form
toggle buka/tutup panel
daftar data hasil fetch lokal
status loading atau error
tab aktif, filter aktif, pagination lokal

Efek terhadap rerender

Saat setState dipanggil, React menjadwalkan rerender komponen tersebut dan subtree yang bergantung pada hasil render itu.

Artinya:

nilai state berubah
fungsi komponen dijalankan ulang
JSX dihitung ulang
UI diperbarui bila hasil render berubah

Contoh

jsx

import { useState } from 'react';
 
export default function Counter() {
  const [count, setCount] = useState(0);
 
  return (
    <button onClick={() => setCount

Catatan penting

State bersifat snapshot per render. Kalau memakai nilai lama di dalam handler, pastikan update-nya aman.
Untuk update yang bergantung pada nilai sebelumnya, lebih aman pakai bentuk fungsi:

jsx

setCount(prev => prev + 1);

Jebakan umum

Menaruh state terlalu banyak. Kalau satu data bisa dihitung dari props atau state lain, jangan disalin ke state tanpa alasan.
Mengubah object/array state secara mutatif. React butuh referensi baru agar perubahan terbaca.

jsx

// Hindari
user.name = 'Budi';
setUser(user);
 
// Lebih aman
setUser(prev => ({ ...prev, name: 'Budi' }));

useEffect

Kapan dipakai

Pakai useEffect untuk side effect, yaitu pekerjaan yang menyentuh dunia luar dari proses render murni.

Contoh:

fetch data
subscribe ke event listener
sinkronisasi title halaman
menulis ke storage
integrasi dengan library non-React
cleanup subscription atau timer

Efek terhadap rerender

useEffect sendiri tidak otomatis memicu rerender. Yang memicu rerender adalah perubahan state yang dilakukan di dalam effect.

Urutan sederhananya:

Komponen render.
React commit hasil render ke DOM.
useEffect dijalankan.
Kalau effect memanggil setState, render berikutnya terjadi.

Contoh

jsx

import { useEffect, useState } from 'react';
 
export default function UserList() {
  const [users, setUsers] = useState([]);
 
  useEffect(() => {
    let cancelled

Dependency array

Dependency array menentukan kapan effect dijalankan ulang.

[] → hanya setelah mount
[a, b] → ulang kalau a atau b berubah referensinya
tanpa dependency array → jalan setiap render

Jebakan umum

Dependency kurang lengkap: effect memakai nilai props atau state, tetapi tidak dicantumkan. Akibatnya effect membaca nilai lama.
Dependency berlebihan: memasukkan object atau function baru di setiap render, sehingga effect terus jalan.
Infinite loop: effect mengubah state yang justru menjadi dependency effect itu sendiri.

Contoh loop yang sering terjadi:

jsx

useEffect(() => {
  setCount(count + 1);
}, [count]);

Kalau memang perlu sinkronisasi seperti ini, pikirkan ulang desain state-nya. Sering kali yang dibutuhkan bukan effect, melainkan derived state atau event handler.

Catatan praktis

Jangan taruh logika render murni di useEffect.
Kalau efek hanya menghitung nilai dari props/state tanpa side effect, lebih cocok useMemo atau perhitungan biasa.
Cleanup penting untuk interval, subscription, listener, dan request yang bisa dibatalkan.

useMemo

Kapan dipakai

Pakai useMemo saat ada perhitungan yang mahal atau saat perlu menjaga referensi hasil tetap stabil antar render.

Contoh umum:

filter/sort daftar besar
transform data kompleks
membangun object props untuk child yang sensitif terhadap referensi
menghindari kerja ulang yang tidak perlu pada render sering

Efek terhadap rerender

useMemo tidak mencegah rerender komponen. Komponen tetap rerender kalau state atau props berubah.

Yang dilakukan useMemo adalah:

menghitung ulang nilai hanya jika dependency berubah
mengembalikan hasil lama kalau dependency sama

Contoh

jsx

import { useMemo } from 'react';
 
export default function ProductList({ products, query }) {
  const filtered = useMemo(() => {
    return products.filter(product =>
      product.name.

Jebakan umum

Memakai useMemo untuk semua hal. Kalau perhitungannya murah, memoization justru menambah kompleksitas.
Mengira useMemo menjaga semua child dari rerender. Itu hanya benar kalau child juga memang bergantung pada referensi hasil memo itu.
Dependency array salah, sehingga hasil lama dipakai padahal input sudah berubah.

Catatan praktis

Gunakan useMemo sebagai optimisasi yang terukur, bukan kebiasaan default. Kalau belum ada bukti bottleneck, sederhanakan dulu.

useCallback

Kapan dipakai

Pakai useCallback saat perlu menjaga referensi fungsi tetap stabil, biasanya ketika fungsi itu diteruskan sebagai props ke child yang dioptimalkan dengan memo, atau dipakai sebagai dependency hook lain.

Contoh umum:

handler yang dikirim ke child memoized
function dependency di effect atau memo lain
callback untuk event subscription yang butuh referensi stabil

Efek terhadap rerender

useCallback tidak menghentikan komponen induk dari rerender.

Fungsinya adalah:

mencegah fungsi baru dibuat setiap render bila dependency tidak berubah
membantu child memo tidak ikut rerender hanya karena referensi function berganti

Contoh

jsx

import { memo, useCallback, useState } from 'react';
 
const Button = memo(function Button({ onClick }) {
  return <button onClick={onClick}>Tambah</button>;
});
 
export default

Jebakan umum

Memakai useCallback tanpa kebutuhan nyata. Kalau tidak ada child memoized atau dependency lain yang sensitif pada referensi, manfaatnya kecil.
Dependency array yang tidak lengkap membuat callback menangkap nilai lama.
Mengandalkan useCallback untuk “menghemat semua rerender”. Itu bukan fungsinya.

Hubungan dengan `useMemo`

Secara konsep:

useMemo menyimpan hasil nilai
useCallback menyimpan hasil fungsi

Bisa dianggap useCallback(fn, deps) mirip useMemo(() => fn, deps) secara bentuk, tetapi gunakan sesuai niatnya agar kode tetap terbaca.

useRef

Kapan dipakai

Pakai useRef saat perlu menyimpan sesuatu yang bertahan antar render, tetapi perubahan nilainya tidak perlu memicu rerender.

Contoh umum:

referensi DOM
nilai mutable seperti timer ID
flag internal
menyimpan nilai sebelumnya
cache kecil yang tidak perlu tampil ke UI

Efek terhadap rerender

Perubahan ref.current tidak memicu rerender.

Itu bedanya yang paling penting dengan useState.

Contoh DOM ref

jsx

import { useEffect, useRef } from 'react';
 
export default function SearchInput() {
  const inputRef = useRef(null);
 
  useEffect(() => {
    inputRef.current?.focus();
  }, []);
 
  return <

Contoh menyimpan nilai sebelumnya

jsx

import { useEffect, useRef } from 'react';
 
export default function PreviousValue({ value }) {
  const prevRef = useRef(value);
 
  useEffect(() => {
    prevRef.current = value;
  }, [value]);
 
  return <

Jebakan umum

Menaruh data UI utama di ref. Kalau nilainya harus tampil di layar, pakai state, bukan ref.
Menganggap ref adalah state versi ringan. Bukan. Ref tidak memberi reactivity.
Membaca ref untuk logika yang seharusnya memicu render. Hasilnya bisa terasa “tidak sinkron” dengan UI.

Perbandingan cepat

Hook	Dipakai untuk	Memicu rerender?	Catatan utama
`useState`	data UI yang berubah	Ya, saat setter dipanggil	pilihan default untuk state lokal
`useEffect`	side effect setelah render	Tidak langsung	hati-hati dependency array dan cleanup
`useMemo`	hasil perhitungan / referensi bernilai stabil	Tidak	optimisasi, bukan alat utama
`useCallback`	referensi fungsi stabil	Tidak	berguna saat passing callback ke child memoized
`useRef`	nilai mutable / DOM ref	Tidak	update `current` tidak rerender

Dependency array yang salah: pola yang sering bikin bug

Bagian ini penting karena banyak bug React bukan berasal dari hook yang salah, melainkan dependency array yang tidak sesuai.

1. Dependency kurang

jsx

useEffect(() => {
  console.log(user.name);
}, []);

Kalau user.name bisa berubah, effect ini akan terus membaca nilai awal.

2. Dependency terlalu banyak

jsx

const options = { mode: 'dark' };
 
useEffect(() => {
  connect(options);
}, [options]);

Karena options dibuat ulang setiap render, effect ikut jalan terus.

Solusi yang lebih rapi:

jsx

const options = useMemo(() => ({ mode: 'dark' }), []);

atau pindahkan object ke dalam effect kalau memang hanya dipakai di sana.

3. Function dependency yang berubah terus

jsx

const handleSave = () => {
  saveDraft(form);
};
 
useEffect(() => {
  register(handleSave);
}, [handleSave]);

Karena handleSave baru setiap render, effect bisa terus aktif. Kalau perlu stabil, bungkus dengan useCallback.

4. Effect dipakai untuk turunan data yang sebenarnya bisa dihitung langsung

Kalau data hanya hasil transform dari props/state, jangan simpan hasilnya ke state lalu sinkronkan lewat effect kalau tidak perlu.

Lebih sederhana:

jsx

const filtered = useMemo(() => filterItems(items, query), [items, query]);

Daripada:

jsx

const [filtered, setFiltered] = useState([]);
 
useEffect(() => {
  setFiltered(filterItems(items, query));
}, [items, query]);

Pendekatan pertama biasanya lebih bersih dan lebih sedikit tempat bug.

Kapan harus memilih hook yang mana

Gunakan pertanyaan cepat ini:

Perlu data yang tampil di UI dan berubah akibat interaksi? → useState
Perlu sinkronisasi dengan API luar React setelah render? → useEffect
Perlu menghitung hasil mahal atau menjaga referensi nilai? → useMemo
Perlu menjaga referensi fungsi tetap stabil? → useCallback
Perlu menyimpan nilai mutable atau DOM tanpa rerender? → useRef

Contoh kombinasi di komponen nyata

jsx

import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
export default function SearchDashboard({ products }) {
  const [query, setQuery] = useState

Di contoh ini:

useState menyimpan query input.
useRef menyimpan referensi input.
useMemo menghitung hasil filter.
useCallback menjaga handler stabil.
useEffect menyinkronkan judul halaman.

Catatan implementasi

Jangan pakai hooks di dalam kondisi, loop, atau fungsi biasa. Hooks harus dipanggil di level teratas komponen atau custom hook.
Kalau dependency array terasa sulit dipenuhi, itu sering tanda desain state-nya perlu dirapikan.
Optimisasi hanya masuk akal kalau ada data besar, rerender sering, atau child sensitif terhadap referensi.
Banyak kasus bisa selesai dengan state yang lebih sederhana dan komponen yang lebih kecil, bukan dengan hook tambahan.

Kesimpulan

Untuk praktik sehari-hari, urutan berpikir yang aman biasanya begini:

Pakai useState untuk state yang benar-benar tampil di UI.
Pakai useEffect hanya untuk side effect.
Pakai useMemo dan useCallback kalau ada alasan performa atau stabilitas referensi yang jelas.
Pakai useRef untuk nilai mutable dan akses DOM tanpa rerender.

Kalau satu komponen mulai terasa rumit, biasanya masalahnya bukan “kurang hook”, melainkan hook dipakai untuk tugas yang tidak tepat.

Reactjs Hooks Usestate Useeffect Usememo Usecallback Useref | Rujukan Pemrograman | Mahir.dev Academy

Selesai membaca dokumentasi ini?

Reactjs Hooks Usestate Useeffect Usememo Usecallback Useref

Definisi

Gambaran besar alur render

useState

Kapan dipakai

Efek terhadap rerender

Contoh

Catatan penting

Jebakan umum

useEffect

Kapan dipakai

Efek terhadap rerender

Contoh

Dependency array

Jebakan umum

Catatan praktis

useMemo

Kapan dipakai

Efek terhadap rerender

Contoh

Jebakan umum

Catatan praktis

useCallback

Kapan dipakai

Efek terhadap rerender

Contoh

Jebakan umum

Hubungan dengan useMemo

useRef

Kapan dipakai

Efek terhadap rerender

Contoh DOM ref

Contoh menyimpan nilai sebelumnya

Jebakan umum

Perbandingan cepat

Dependency array yang salah: pola yang sering bikin bug

1. Dependency kurang

2. Dependency terlalu banyak

3. Function dependency yang berubah terus

4. Effect dipakai untuk turunan data yang sebenarnya bisa dihitung langsung

Kapan harus memilih hook yang mana

Contoh kombinasi di komponen nyata

Catatan implementasi

Kesimpulan

Hubungan dengan `useMemo`