Profiling dengan React DevTools
Buka React DevTools > Profiler tab, record interaksi yang lambat. Identifikasi komponen yang re-render terlalu sering atau terlalu lama. Flame graph menunjukkan hirarki render dan durasi.
Mencegah Re-render yang Tidak Perlu
- React.memo untuk komponen yang props jarang berubah
- useMemo untuk nilai kalkulasi yang mahal
- useCallback untuk function yang di-pass sebagai props
- Hindari object/array literal inline sebagai props
Code Splitting
Gunakan React.lazy dan Suspense untuk lazy load komponen yang tidak diperlukan saat initial load. Route-based splitting adalah quick win terbesar untuk aplikasi besar.
Virtualisasi List Panjang
Jangan render 10.000 item sekaligus. Gunakan react-window atau TanStack Virtual untuk hanya render item yang visible di viewport.
Optimasi Bundle Size
Analisis bundle dengan vite-bundle-visualizer. Tree-shaking pastikan tidak ada dead code. Import hanya fungsi yang dibutuhkan dari library besar (lodash, date-fns).
Web Vitals
Ukur LCP (Largest Contentful Paint), FID (First Input Delay), dan CLS (Cumulative Layout Shift) sebagai target optimasi yang langsung berdampak pada user experience dan SEO.