Catatan belajar React: jalur yang benar-benar kupakai

Ini catatan hidup — kutulis ulang tiap kali pemahamanku berubah. Bukan tutorial React paling lengkap, tapi jalur yang benar-benar kupakai sampai React jadi alat kerja utama di project klien.

Urutan belajar yang kupakai

Kesalahan pertamaku dulu: lompat ke React sebelum nyaman dengan JavaScript. Hasilnya, setiap error terasa seperti sihir. Urutan yang akhirnya bekerja:

1. JavaScript dulu, sungguhan. Array method (map, filter, reduce), destructuring, spread, promise/async-await, dan closure. React pada dasarnya cuma fungsi yang dipanggil ulang — kalau closure paham, useState jadi masuk akal.
2. Berpikir komponen. Pecah UI jadi kotak-kotak: mana yang punya state, mana yang cuma menerima props. Latihanku: ambil satu halaman e-commerce sungguhan, gambar pohon komponennya di kertas sebelum menulis kode.
3. State sesedikit mungkin. Aturan yang kupegang sampai sekarang: kalau sebuah nilai bisa dihitung dari props atau state lain, jangan simpan sebagai state baru.

// Anti-pola yang dulu sering kutulis: state turunan.
const [items, setItems] = useState([]);
const [total, setTotal] = useState(0); // ❌ selalu bisa basi

// Yang kupakai sekarang: hitung saat render.
const [items, setItems] = useState([]);
const total = items.reduce((sum, it) => sum + it.price * it.qty, 0); // ✅

Pola yang terbukti di project klien

Setelah beberapa build komersial (storefront, dashboard admin, form multi-langkah), tiga pola ini yang paling sering menyelamatkanku:

• Server state ≠ UI state. Data dari API kuserahkan ke TanStack Query (cache, refetch, loading state) — useState hanya untuk hal yang benar-benar milik UI: modal terbuka, input form, tab aktif.
• Angkat state seperlunya saja. Mulai dari komponen terdalam; baru angkat ke parent saat dua komponen benar-benar butuh nilai yang sama. Mengangkat terlalu dini = props drilling yang menyiksa.
• Komponen “bodoh” dibayar belakangan. Komponen presentasional tanpa logic gampang dipindah antar-project — separuh UI kit yang kupakai di project klien lahir dari project sebelumnya.

Kapan aku justru TIDAK memakai React

Situs yang sedang kamu baca ini tidak memakai React — dirender server dengan Hono JSX + HTMX di Cloudflare Workers. Alasannya bisnis, bukan selera: konten statis + form sederhana tidak butuh 100KB JavaScript di browser. React kupakai saat aplikasinya benar-benar interaktif — keranjang belanja, dashboard realtime, editor.

Pelajaran terbesarnya justru itu: belajar React sampai tahu kapan tidak memakainya.