Kebanyakan aplikasi React sudah cukup cepat tanpa trik apa pun. Optimasi yang ditebak-tebak sering cuma menambah kode rumit. Jadi langkah pertama selalu mengukur.

Pasang ekstensi React DevTools di browser, buka tab Profiler, tekan rekam, lakukan aksi yang terasa lambat, lalu berhenti. Kamu akan melihat komponen mana yang render, berapa kali, dan berapa milidetik. Baru setelah tahu biang keroknya, pilih alat yang tepat.

memo

Saat induk render ulang, semua anaknya ikut render, walaupun props mereka tidak berubah. memo membungkus komponen supaya React melewati render bila props-nya sama (dibandingkan dengan Object.is).

import { memo } from 'react';

const KartuProduk = memo(function KartuProduk({ nama, harga }) {
  return <div>{nama}: Rp{harga}</div>;
});

memo tidak membuat komponen "tidak pernah render ulang". Ia tetap render bila props berubah, atau bila state dan context miliknya berubah. Hati-hati juga: objek dan fungsi baru yang dibuat setiap render (onPilih={() => ...}) selalu dianggap props baru. Di situ useCallback dan useMemo membantu. Kabar baiknya, React Compiler (rilis stabil 1.0 pada 2025) bisa menambahkan memoization ini otomatis saat build.

lazy dan Suspense

Secara bawaan, Vite menggabungkan semua halaman jadi satu bundel. Halaman berat seperti dasbor admin bisa dipisah dan baru diunduh saat dibuka:

import { lazy, Suspense } from 'react';

const Dasbor = lazy(() => import('./Dasbor'));

function App() {
  return (
    <Suspense fallback={<p>Memuat halaman...</p>}>
      <Dasbor />
    </Suspense>
  );
}

Selama file Dasbor diunduh, Suspense menampilkan fallback. Komponen yang di-lazy harus di-export default.

Virtualisasi list

Merender 10.000 baris berarti 10.000 elemen DOM, padahal layar hanya memuat sekitar 20. Virtualisasi hanya merender baris yang terlihat dan menukar isinya saat kamu scroll. Pakai pustaka seperti TanStack Virtual atau react-window saat daftar sudah ribuan baris. Untuk puluhan item, tidak perlu.

Tes menjaga fitur tetap jalan saat kamu merombak kode. Untuk proyek Vite, pasangan paling umum adalah Vitest (menjalankan tes, API-nya mirip Jest) dan React Testing Library (merender komponen dan berinteraksi seperti pengguna).

npm install -D vitest jsdom @testing-library/react @testing-library/user-event @testing-library/jest-dom

Di vite.config.js tambahkan test: { environment: 'jsdom' } agar ada document palsu. Lalu tulis tes:

// Penghitung.test.jsx
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom/vitest';
import { test, expect } from 'vitest';
import Penghitung from './Penghitung';

test('angka bertambah saat tombol diklik', async () => {
  const user = userEvent.setup();
  render(<Penghitung />);

  await user.click(screen.getByRole('button', { name: 'Tambah' }));

  expect(screen.getByText('Jumlah klik: 1')).toBeInTheDocument();
});

Jalankan dengan npx vitest. Tiga pemain utamanya: render memasang komponen, screen mencari elemen, userEvent meniru klik dan ketikan sungguhan (termasuk fokus dan urutan event). Prinsipnya: uji yang dilihat pengguna. Cari elemen lewat peran dan teks (getByRole, getByText), bukan nama class CSS. Logika murni seperti reducer dan fungsi validasi lebih gampang lagi: cukup panggil fungsinya dan cek hasilnya.

Saat development, Vite menyajikan file satu per satu agar cepat diubah. Untuk produksi, jalankan:

npm run build     # hasil di folder dist/
npm run preview   # coba hasil build di http://localhost:4173

Folder dist berisi index.html dan file JS/CSS yang sudah di-minify dengan nama ber-hash (index-B7x2k.js) agar cache browser selalu benar. Isinya file statis, jadi bisa diunggah ke hosting mana pun. Variabel lingkungan untuk browser wajib diawali VITE_ dan dibaca dengan import.meta.env.VITE_API_URL. Ingat, semua yang ada di bundel bisa dilihat orang, jadi jangan simpan kunci rahasia di sana.

Kalau memakai React Router, server harus mengembalikan index.html untuk semua alamat, agar membuka /produk/7 langsung tidak berakhir 404.

React + Vite merender di browser (CSR): pengguna mengunduh JavaScript dulu, baru halaman muncul. Untuk blog, toko online, atau halaman yang butuh SEO, Next.js menyiapkan HTML di server (SSR) atau saat build (SSG). Ia juga punya routing berbasis folder (app/produk/[id]/page.jsx jadi /produk/:id), Server Components, serta optimasi gambar dan font. Semua yang kamu pelajari (komponen, props, state, hooks) tetap berlaku karena Next.js dibangun di atas React. Mulai dengan npx create-next-app@latest.

Aplikasi daftar tugas merangkum hampir semua konsep kelas ini: useState, controlled input, map + key, update immutable, dan event handler.

function AplikasiTugas() {
  const [tugas, setTugas] = useState([]);
  const [teks, setTeks] = useState('');

  function tambah(e) {
    e.preventDefault();
    if (!teks.trim()) return;
    setTugas([...tugas, { id: crypto.randomUUID(), judul: teks.trim(), selesai: false }]);
    setTeks('');
  }
  const toggle = (id) => setTugas(tugas.map((t) => (t.id === id ? { ...t, selesai: !t.selesai } : t)));
  const hapus = (id) => setTugas(tugas.filter((t) => t.id !== id));
  const sisa = tugas.filter((t) => !t.selesai).length; // dihitung, bukan state

  return (
    <>
      <form onSubmit={tambah}>
        <input value={teks} onChange={(e) => setTeks(e.target.value)} />
        <button>Tambah</button>
      </form>
      <ul>
        {tugas.map((t) => (
          <li key={t.id}>
            <input type="checkbox" checked={t.selesai} onChange={() => toggle(t.id)} />
            {t.judul} <button onClick={() => hapus(t.id)}>Hapus</button>
          </li>
        ))}
      </ul>
      <p>{sisa} tugas tersisa</p>
    </>
  );
}

Coba kembangkan: filter Semua/Aktif/Selesai, simpan ke localStorage, atau ubah jadi useReducer. Latihan di bab ini melatih logika itu sebagai fungsi murni.

• Komponen kecil dengan satu tanggung jawab; pindahkan logika berulang ke custom hook.
• Nama jelas: DaftarProduk, handleSubmit, isLoading.
• Struktur folder konsisten sejak awal, misalnya components/, pages/, hooks/.
• Aktifkan ESLint (termasuk aturan react-hooks) dan Prettier, lalu pertimbangkan TypeScript.

• Mengubah state langsung. tugas.push(x) tidak memicu render; buat array baru.
• Indeks sebagai key. Tampilan kacau saat list diurutkan atau item dihapus; pakai ID.
• Lupa array dependensi useEffect. Efek jalan tiap render dan bisa berputar tanpa akhir.
• Menyimpan nilai turunan di state. sisa cukup dihitung dari tugas.
• Prop drilling berlapis-lapis. Pakai Context bila sudah terasa berat.
• onClick={hapus()}. Fungsi langsung jalan saat render; tulis onClick={() => hapus(id)}.
• Optimasi tanpa mengukur. Buka Profiler dulu sebelum menaburkan memo.

1. Fondasi (1-2 minggu): HTML, CSS, JavaScript modern, map/filter/reduce, destructuring, spread.
2. Dasar React (2-3 minggu): JSX, komponen, props, useState, event, list, render bersyarat.
3. Menengah (3-4 minggu): useEffect dan API, React Router, form, Context, custom hook.
4. Lanjutan (berkelanjutan): TypeScript, testing, Next.js, performa, CI/CD.

Belajar paling efektif lewat proyek: kalkulator, daftar tugas, katalog film dari API publik, lalu aplikasi dengan login. Rujukan utama: react.dev, reactrouter.com, vite.dev, dan testing-library.com.