00:00:00React baru saja mendapatkan alat pemindaian anti-pattern baru bernama React Doctor.
00:00:05Alat ini dibuat oleh Aidan Bai, pengembang berbakat yang juga menciptakan Million.js,
00:00:11React Grab, React Scan, dan Amy.
00:00:14Di video kali ini, kita akan mengulas alat ini, melihat cara kerjanya, dan mencobanya
00:00:19secara langsung.
00:00:20Ini akan sangat seru, jadi mari kita mulai ulasannya.
00:00:27React Doctor adalah alat CLI sederhana untuk mendeteksi anti-pattern umum di React seperti
00:00:33penggunaan useEffect yang tidak perlu, masalah aksesibilitas, atau prop drilling.
00:00:38Di balik layarnya, ia menggunakan OX lint, salah satu linter JavaScript tercepat yang ditulis dalam
00:00:43Rust.
00:00:44Karena OX lint berbasis Rust, ia bisa memindai puluhan ribu baris kode dalam
00:00:49hitungan milidetik.
00:00:50Ia menggunakannya untuk membangun Abstract Syntax Tree atau AST dari proyek Anda guna mencari
00:00:56pola React spesifik seperti penggunaan hook, struktur prop, dan batasan komponen.
00:01:01Alat ini dibuat berdasarkan lebih dari 47 praktik terbaik React dan mencakup pemindaian berguna,
00:01:08misalnya mencari kunci keamanan yang tidak sengaja tertulis langsung, atau seperti yang satu ini
00:01:13di mana ia memeriksa pola loading state dan memberikan laporan kapan harus menggunakannya
00:01:19dibandingkan kapan sebaiknya menggunakan useTransition.
00:01:21Proyek ini sepenuhnya open source dan masih tergolong baru.
00:01:25Jadi, ini kesempatan besar bagi komunitas untuk berkontribusi dengan menambahkan
00:01:30pemeriksaan praktik baik lainnya yang menurut Anda mungkin terlewat di sini.
00:01:33Menurut saya bagian paling keren dari proyek ini adalah UI-nya.
00:01:36Desain dan estetikanya sangat bagus, ditambah lagi berkat OX lint, performanya sangat cepat.
00:01:42Selain itu, Anda juga bisa menjalankannya sebagai keahlian untuk AI coding agent Anda
00:01:47dan bisa digunakan secara terprogram pada sesuatu seperti Node.js API, misalnya.
00:01:52Sekarang mari kita coba alat ini sendiri.
00:01:54Saya punya proyek berbasis React berupa alat visualisasi grafik saham sederhana,
00:02:00yang saya tulis enam tahun lalu, saat AI bahkan belum populer.
00:02:04Akan sangat menarik melihat seberapa baik saya menulis kode React enam tahun yang lalu.
00:02:09Jadi saya akan menjalankan perintah React Doctor di repositori saya.
00:02:12Dan seperti yang Anda lihat, hasilnya langsung keluar.
00:02:15Coba lihat itu.
00:02:16Proyek saya mendapatkan skor yang nyaris sempurna.
00:02:18Senang rasanya mengetahui bahwa enam tahun yang lalu pun, saya sudah menulis kode React
00:02:24berkualitas baik.
00:02:25Baiklah, mari kita lihat apa yang ditemukannya.
00:02:27Kita mendapat peringatan tentang penggunaan AI sebagai key, yang mana itu sangat valid.
00:02:31Lalu ia juga mengenali bahwa recharts adalah library yang berat.
00:02:35Jadi ia menyarankan saya untuk menggunakan lazy loading saja.
00:02:38Lalu ia juga mendeteksi ada empat panggilan useState dalam satu useEffect.
00:02:44Dan saya disarankan untuk mempertimbangkan penggunaan useReducer.
00:02:46Semuanya adalah poin yang sangat valid.
00:02:48Terima kasih, React Doctor.
00:02:49Sekarang mari kita coba menjalankannya pada basis kode yang lebih besar.
00:02:52Ini adalah proyek CRM yang sangat populer bernama "20", yang merupakan
00:02:57alternatif open source untuk Salesforce.
00:02:59Dan proyek ini ditulis menggunakan React.
00:03:00Mari kita clone repo ini dan lihat bagaimana penilaian React Doctor terhadapnya.
00:03:04Setelah dijalankan, kita lihat React Doctor secara otomatis mendeteksi bahwa proyek ini
00:03:08adalah mono repo, dan ia mengenali paket-paket di dalamnya.
00:03:12Mari kita lihat dulu skor untuk paket situs web pemasaran mereka.
00:03:15Dan seperti yang terlihat di sini, hasilnya juga cukup bagus.
00:03:18Ada satu error, tapi itu hanya karena tag alt yang hilang.
00:03:22Jadi secara keseluruhan, menurut saya ini skor yang sangat bagus.
00:03:25Baiklah, sekarang mari kita periksa paket front-end-nya, misalnya.
00:03:30Yang ini sedikit lebih buruk karena ada 99 error, tapi masih dalam zona hijau.
00:03:35Inilah saran saya.
00:03:37Jika Anda pengembang yang ingin meningkatkan portofolio GitHub, ini alat yang bagus
00:03:41untuk memindai berbagai proyek open source dan mencari celah di mana Anda bisa memberikan
00:03:47kontribusi yang signifikan.
00:03:48Itulah sekilas tentang React Doctor. Menurut saya ini alat yang sangat keren, ringan, dan praktis
00:03:52yang bisa sangat membantu proses pemeriksaan mandiri
00:03:58pada proyek-proyek React Anda.
00:03:59Saya pasti akan menggunakannya di proyek-proyek saya ke depannya.
00:04:03Dan teman-teman, jika video ini bermanfaat, beri tahu saya dengan menekan tombol like
00:04:07di bawah video ini.
00:04:09Dan jangan lupa subscribe ke channel kami agar tidak ketinggalan
00:04:14video-video kami selanjutnya.
00:04:15Saya Andris dari Better Stack dan sampai jumpa di video berikutnya.