Vercel merilis repositori praktik terbaik React

• Vercel merilis repositori terstruktur React-Best-Practices yang dibangun berdasarkan lebih dari 10 tahun pengalaman optimasi performa React dan Next.js
• Repositori ini dirancang agar agen AI dan LLM dapat mengambil keputusan optimasi yang konsisten saat melakukan code review atau refactoring
• Intinya adalah memprioritaskan penghapusan waterfall dan pengurangan ukuran bundle, lalu mencakup 8 kategori hingga performa server, klien, dan rendering
• Setiap aturan mencakup tingkat prioritas (CRITICAL~LOW) beserta contoh kode yang salah dan contoh perbaikannya
• Aturan-aturan ini telah divalidasi dalam kasus produksi nyata, sehingga mendukung optimasi otomatis melalui integrasi dengan agen coding

---

Gambaran umum React Best Practices

• react-best-practices adalah repositori yang merangkum pengetahuan optimasi React dan Next.js yang terakumulasi selama lebih dari 10 tahun
  • Disusun agar dapat dijadikan referensi oleh agen AI dan LLM saat menganalisis kode serta memberikan saran perbaikan
• Masalah performa React sering muncul dalam bentuk penanganan gejala aplikasi yang melambat setelah rilis
  • Eksekusi berurutan pada pekerjaan asinkron, bundle klien yang terus membesar, dan re-render yang tidak perlu disebut sebagai penyebab utama
• Masalah-masalah ini berfungsi sebagai bottleneck struktural yang menimbulkan biaya berulang pada setiap sesi pengguna

Ide utama: optimasi berbasis prioritas

• Banyak upaya peningkatan performa gagal karena dimulai dari level stack yang lebih rendah
  • Misalnya, jika request waterfall menambah 600ms, optimasi useMemo menjadi tidak berarti
  • Jika setiap halaman mengirim 300KB JavaScript yang tidak perlu, optimasi mikro pada loop nyaris tidak berdampak
• Framework ini dimulai dari dua tindakan inti
  1. Menghapus waterfall
  2. Mengurangi ukuran bundle
• Setelah itu diperluas ke performa server, data fetching di klien, dan optimasi re-render
• Total ada 8 kategori dan lebih dari 40 aturan yang diurutkan berdasarkan tingkat kepentingan
  • Tahap CRITICAL berfokus pada penghapusan waterfall dan pengurangan bundle, sedangkan tahap LOW mencakup pola lanjutan

Kategori utama yang disertakan

• Repositori ini membahas 8 area performa berikut
  • Penghapusan asynchronous waterfall
  • Optimasi ukuran bundle
  • Performa server
  • Data fetching di klien
  • Optimasi re-render
  • Performa rendering
  • Pola lanjutan
  • Performa JavaScript
• Setiap aturan menyediakan tingkat dampak (CRITICAL~LOW) bersama contoh kode yang salah dan contoh perbaikannya
  • Contoh: kode yang menunggu data di semua cabang karena pemanggilan await yang tidak perlu → diperbaiki dengan mengubah urutan kondisi agar hanya menunggu saat diperlukan
• Semua file aturan dikompilasi menjadi AGENTS.md, sehingga agen AI dapat langsung merujuknya saat code review

Kumpulan aturan berbasis kasus nyata

• Semua aturan dibuat berdasarkan pengalaman peningkatan performa di codebase produksi nyata
  • Penggabungan loop: kode yang sebelumnya memindai daftar pesan 8 kali dikurangi menjadi satu kali untuk meningkatkan efisiensi pemrosesan data berskala besar
  • Paralelisasi asinkron: panggilan DB yang tidak saling bergantung dijalankan secara paralel untuk memangkas total waktu tunggu hingga setengahnya
  • Penyesuaian font fallback: saat menggunakan font sistem, jarak huruf disesuaikan agar tampilan tetap natural dalam kondisi fallback

Integrasi dengan agen coding

• react-best-practices disediakan sebagai paket Agent Skills dan dapat dipasang pada berbagai agen coding
  • Dapat digunakan di Opencode, Codex, Claude Code, Cursor, dan lainnya
• Jika agen mendeteksi pemanggilan useEffect yang bertingkat atau import klien yang berat, agen dapat merujuk aturan terkait untuk mengusulkan perbaikan
• Perintah instalasi:
  npx add-skill vercel-labs/agent-skills
• Seluruh repositori dapat dilihat di GitHub react-best-practices

[ywc0008]

https://ywc.life/posts/vercel-react-best-practice
Saya sudah menerjemahkannya secara lengkap.

[honglu]

Terima kasih! Saya akan membacanya dengan baik.