Mengenal Ekosistem Library React

Kenapa ini penting

React sengaja dibuat "kecil". Ia hanya mengurus satu hal: mengubah state menjadi tampilan. React tidak punya cara bawaan untuk mengambil data dari API dengan cache, tidak punya form validator, tidak punya komponen tombol yang cantik. Filosofi ini membuat React fleksibel, tapi juga berarti kamu harus memilih sendiri "perabotan" untuk rumahmu.

Bayangkan kamu baru pindah ke rumah kosong. React adalah rumahnya, dinding, atap, listrik. Sofa, kulkas, dan lemari harus kamu beli sendiri. Kalau asal beli, bisa jadi kulkasnya terlalu besar untuk dapur, atau sofanya cepat rusak. Memilih library juga begitu: salah pilih berarti bundle aplikasi membengkak, bug yang tidak pernah diperbaiki, atau harus migrasi besar-besaran setahun kemudian.

Kemampuan memilih library dengan alasan yang jelas adalah salah satu pembeda antara developer junior dan developer yang dipercaya mengambil keputusan teknis.

Konsep inti

Peta ekosistem React (2026)

Tabel ini bukan "satu-satunya jawaban benar". Yang penting kamu paham kategori masalahnya, karena library bisa berganti tapi kategorinya tetap.

Cara memilih library: lima pertanyaan

1. Apakah banyak dipakai? Cek npmtrends.com dan bandingkan unduhan mingguan. Contoh: ketik zustand vs jotai vs redux. Library yang dipakai banyak orang berarti banyak jawaban di Stack Overflow dan tutorial.
2. Apakah masih dirawat (maintenance)? Buka repo GitHub-nya. Lihat tanggal commit terakhir, tanggal rilis terakhir (npm view <nama> time), dan apakah issue dijawab. Library yang tidak dirilis dua tahun patut dicurigai.
3. Berapa ukurannya (bundle size)? Buka bundlephobia.com atau pkg-size.dev. Ukuran "minified + gzipped" yang menentukan berapa lama user di HP menunggu. Zustand cuma sekitar 1 KB, sedangkan library UI lengkap bisa ratusan KB.
4. Bagaimana dokumentasinya? Dokumentasi yang jelas menghemat berjam-jam. Coba baca halaman "Getting Started", kalau kamu bingung di halaman pertama, itu tanda bahaya.
5. Apakah cocok dengan stack kita? Misalnya: apakah mendukung React 19? Apakah punya tipe TypeScript? Cek peerDependencies dengan npm view <nama> peerDependencies.

Server state vs client state

Ini konsep terpenting di materi ini. Ada dua jenis "data" di aplikasi:

• Client state: data yang dimiliki browser. Contoh: tema gelap/terang, sidebar terbuka atau tertutup, isi keranjang sebelum checkout, filter yang sedang dipilih. Sumber kebenarannya ada di aplikasi kamu sendiri.
• Server state: data yang dimiliki server, dan browser hanya memegang salinannya. Contoh: daftar tugas dari database, profil user, daftar produk. Data ini bisa berubah tanpa sepengetahuanmu (orang lain mengedit), bisa kedaluwarsa, butuh waktu untuk diambil, dan bisa gagal.

Analoginya: client state itu seperti catatan di buku saku kamu, kamu yang menulis, kamu yang tahu isinya. Server state itu seperti foto papan pengumuman kantor yang kamu ambil pagi tadi. Foto itu berguna, tapi siang ini papan aslinya mungkin sudah berubah. Kamu perlu tahu kapan harus memotret ulang.

Kesalahan klasik pemula adalah memperlakukan server state seperti client state: fetch di useEffect, simpan di useState, lalu lupa loading, lupa error, lupa refresh, dan data tidak pernah diperbarui. Karena itulah kita memakai dua alat berbeda: TanStack Query untuk server state, Zustand untuk client state.

Contoh kode

Inilah cara "manual" yang sering ditulis pemula. Perhatikan berapa banyak hal yang harus diurus sendiri:

// TodoListManual.jsx, cara manual tanpa library
import { useEffect, useState } from "react";

export default function TodoListManual() {
  const [todos, setTodos] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    let dibatalkan = false; // mencegah setState setelah komponen hilang

    fetch("https://jsonplaceholder.typicode.com/todos?_limit=5")
      .then((res) => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then((data) => {
        if (!dibatalkan) setTodos(data);
      })
      .catch((err) => {
        if (!dibatalkan) setError(err.message);
      })
      .finally(() => {
        if (!dibatalkan) setLoading(false);
      });

    return () => {
      dibatalkan = true;
    };
  }, []);

  if (loading) return <p>Memuat...</p>;
  if (error) return <p>Gagal: {error}</p>;

  return (
    <ul>
      {todos.map((t) => (
        <li key={t.id}>{t.title}</li>
      ))}
    </ul>
  );
}
// → Menampilkan 5 judul tugas.
// Masalah yang BELUM ditangani: cache saat pindah halaman,
// refresh otomatis, request ganda kalau 2 komponen butuh data sama, retry saat gagal.

Dan inilah cara mengecek kesehatan sebuah library dari terminal:

# Versi terbaru
npm view zustand version
# → 5.0.16

# Kapan saja dirilis (lihat beberapa baris terakhir)
npm view zustand time --json | tail -5

# Library ini butuh apa?
npm view @tanstack/react-query peerDependencies
# → { react: '^18 || ^19', '@types/react': '^18 || ^19' }

Kesalahan umum

• Memilih library hanya karena "lagi viral". Cek lima pertanyaan di atas dulu. Bintang GitHub banyak tidak menjamin masih dirawat.
• Menyimpan data server di state global (Redux/Zustand) lalu mengelola loading dan refresh sendiri. Gunakan TanStack Query untuk data server; state global untuk hal yang benar-benar milik client.
• Memasang library untuk masalah sepele. Butuh format tanggal sederhana? Intl.DateTimeFormat bawaan browser sering sudah cukup. Setiap library = tambahan ukuran dan tambahan hal yang perlu di-update.
• Tidak mengecek kompatibilitas versi React. Sebelum npm install, cek peerDependencies. Peringatan "ERESOLVE" saat install sering berasal dari sini.
• Menyalin tutorial lama. API library berubah antar versi mayor (contoh: TanStack Query v4 ke v5). Selalu cocokkan versi tutorial dengan versi yang kamu install.

Latihan

1. Mudah, Buka npmtrends.com dan bandingkan axios, ky, dan got. Tulis library mana yang unduhan mingguannya paling tinggi dan kapan rilis terakhirnya.
2. Sedang, Kelompokkan data berikut menjadi server state atau client state: (a) daftar produk toko, (b) mode gelap, (c) jumlah notifikasi belum dibaca dari server, (d) tab yang sedang aktif, (e) profil user yang login, (f) teks yang sedang diketik di kolom pencarian.
3. Menantang, Kamu harus memilih library tanggal untuk proyek. Bandingkan date-fns, dayjs, dan moment dengan lima pertanyaan di modul ini. Tulis rekomendasimu dalam 3 kalimat.

npm view axios version time.modified
npm view ky version time.modified
npm view got version time.modified

npm view moment version time.modified
npm view dayjs version time.modified
npm view date-fns version time.modified

Ringkasan

• React hanya mengurus tampilan; kebutuhan lain dipenuhi library pendukung.
• Pilih library dengan lima pertanyaan: popularitas, maintenance, bundle size, dokumentasi, kompatibilitas.
• Alat bantu: npmtrends.com, bundlephobia.com, dan perintah npm view.
• Server state = salinan data milik server (bisa basi, butuh loading/error). Client state = data milik browser.
• Di materi ini: TanStack Query untuk server state, Zustand untuk client state.